@charset "utf-8";
/* =========================================================
   mk-mix2.css ── 2026-08-27 の指示ぶん（★本番未反映）
   ---------------------------------------------------------
   ・記事カード      扉型。サムネの下に白いカード地を敷く
   ・事例カード      スライダーの初期値を採用
   ・番号カードの白  半透明に戻す（0.45）
   ・contact の帯    いまの青グラデ（.s-punch）を 黒＋画像 に置換。C案より黒を強く
   ・目次 / 表 / FAQ  扉 と mcframe X
   ========================================================= */

/* =========================================================
   ① 事例カード ── スライダー初期値
   タグ12px/高24/内12 ・ タイトル20px lh1.5 w500 ・ 説明14px lh1.75 55%
   内側20px ・ 角丸12px ・ 罫線なし
   ========================================================= */
.mk .mk-case{ border-radius:12px; }
.mk .mk-case .mk-tag{
  font-size:12px;
  height:24px;
  padding:0 12px;
}
.mk .mk-case__title{
  font-size:20px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.02em;
  /* ★タイトル下の罫線は入れない（前回の当てはめ誤りを取り消す） */
  border-bottom:0;
  padding-bottom:0;
  margin-top:10px;
}
.mk .mk-case__client{
  font-size:14px;
  line-height:1.75;
  color:rgba(15,21,36,.55);
  margin-top:8px;
}
.mk .mk-case__pic + *{ padding-top:20px; }
.mk .mk-case > *:last-child{ padding-bottom:20px; }
.mk .mk-case__pic ~ *{ padding-left:20px; padding-right:20px; }

/* =========================================================
   ② 白カードの透明度 ── 元の 0.45 に戻す
   ★前回 #fff（不透明）にしてしまい、背景が透けなくなっていた
   ========================================================= */
.mk .mk-numcard,
.mk .mk-numcard--light,
.mk .s-canary .mk-numcard,
.mk .s-canary .mk-numcard--light{
  background:rgba(255,255,255,.45) !important;
  border:1px solid rgba(15,21,36,1) !important;
}

/* =========================================================
   ③ 記事カード ── 扉型。★サムネの下に白いカード地を敷く
   ---------------------------------------------------------
   ★実際の構造（2026-08-27 実測）
     カードに .mk-post というクラスは付いていない。
     <div class="mk-body mk-postgrid">      ← トップ
     <div class="mk-body mk-grid3">         ← 記事一覧
       <a href="…">                          ← これがカード本体
         <div class="mk-post__pic">…
         <p class="mk-post__tags">…
         <p class="mk-post__title">…
     なので「グリッドの直下の <a>」を狙う。
     .mk-post--sm（記事詳細の下に出る小さいカード）は別物なので触らない。
   実測: .tb-card{border:1px solid rgba(15,21,36,.1); border-radius:12px}
         見出し 24px w400 lh1.5 ls.72px ／ .tb-hr = rgba(15,21,36,.06)
   ========================================================= */
.mk .mk-postgrid > a,
.mk .mk-grid3 > a:has(.mk-post__pic){
  display:block;
  background:#fff;                              /* ★白いカード地 */
  border:1px solid rgba(15,21,36,.1);
  border-radius:12px;
  overflow:hidden;
  padding:0;
  text-decoration:none;
  transition:border-color .2s;
}
.mk .mk-postgrid > a:hover,
.mk .mk-grid3 > a:has(.mk-post__pic):hover{ border-color:#017cc8; }

/* サムネはカード上端いっぱい・角丸なし */
.mk .mk-postgrid > a .mk-post__pic,
.mk .mk-grid3 > a:has(.mk-post__pic) .mk-post__pic{
  margin:0;
  border-radius:0;
  aspect-ratio:16/9;
  overflow:hidden;
}
.mk .mk-postgrid > a .mk-post__pic img,
.mk .mk-grid3 > a:has(.mk-post__pic) .mk-post__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* サムネより下＝白いカードの中身。ここに内側余白をつける */
.mk .mk-postgrid > a .mk-post__tags,
.mk .mk-grid3 > a:has(.mk-post__pic) .mk-post__tags{
  padding:20px 24px 0;
  margin:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.mk .mk-postgrid > a .mk-post__title,
.mk .mk-grid3 > a:has(.mk-post__pic) .mk-post__title{
  padding:14px 24px 0;
  margin:0;
  font-size:20px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.72px;
  color:#0f1524;
}
/* 日付など、タイトルより後ろの要素
   ★罫線は外した（日付の上だけ線が入るのは不自然、というご指摘）。
     扉が罫線を使うのは「項目が続くリスト」の区切りで、
     カードの最後の1行の上に引くものではなかった。 */
.mk .mk-postgrid > a .mk-post__title ~ *,
.mk .mk-grid3 > a:has(.mk-post__pic) .mk-post__title ~ *{
  margin:12px 24px 0;
  padding-top:0;
  border-top:0;
  font-size:14px;
  letter-spacing:1.28px;
  color:rgba(15,21,36,.5);
}
.mk .mk-postgrid > a > *:last-child,
.mk .mk-grid3 > a:has(.mk-post__pic) > *:last-child{ margin-bottom:24px; }

/* カード内のタグは扉の pill（高32px・内22px） */
.mk .mk-postgrid > a .mk-tag,
.mk .mk-grid3 > a:has(.mk-post__pic) .mk-tag{
  height:32px;
  padding:0 22px;
  font-size:14px;
  font-weight:500;
  letter-spacing:1.28px;
  border-radius:9999px;
}

/* 右の小さいカード（.mk-post--sm）も白い囲みにする（ご指示）
   ★横並びのままで、白62%＋青枠＋角丸12px を付ける。 */
.mk .mk-postgrid__side .mk-post--sm,
.mk .mk-post--sm{
  background:rgba(255,255,255,.62);
  border:1px solid #017cc8;
  border-radius:12px;
  padding:14px;
  gap:14px;
  grid-template-columns:110px minmax(0,1fr);
  align-items:start;
}
.mk .mk-post--sm .mk-post__pic{
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/9;
  margin:0;
}
.mk .mk-post--sm .mk-post__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* 小さいカードの中は詰める。タグは小さめ */
.mk .mk-post--sm .mk-post__tags{ padding:0; margin:0 0 6px; gap:5px; }
.mk .mk-post--sm .mk-tag{
  height:24px; padding:0 12px; font-size:12px; letter-spacing:.04em;
}
.mk .mk-post--sm .mk-post__title{
  padding:0; margin:0;
  font-size:15px; line-height:1.7; letter-spacing:.02em;
}
.mk .mk-post--sm .mk-post__title ~ *{
  margin:6px 0 0; padding-top:0; border-top:0; font-size:12px;
}

/* =========================================================
   ④ contact の帯 ── 黒＋画像
   ★いまの青グラデは .mk-band > .s-punch が描いている。
     その層の背景だけを差し替える。位置・大きさ・角丸はそのまま。
   ★C案(#0d1418 / 画像42%) より黒を強くする：地を #070c0f、画像を 26% に。
   ========================================================= */
/* ★contact ページに識別クラスが無いため、body 側で
   <body class="is-contact"> を足すか、.mk-band.-dark を付けて使う。
   検証中は :has() でページを判定する。 */

.mk .mk-band .s-punch,
body.is-contact .mk .mk-band .s-punch,
.mk .mk-band.-dark .s-punch{
  background-image:
    linear-gradient(180deg, rgba(7,12,15,.86) 0%, rgba(7,12,15,.94) 100%),
    url("/_shared/img/top-01-website.webp");   /* ★仮の画像。あとで差し替え */
  background-size:cover, cover;
  background-position:center, center;
  background-attachment:scroll, scroll;
  background-color:#070c0f;
}
/* ぼかし層は黒の上では不要（青のときだけ意味があった） */

.mk .mk-band .s-punch__blur,
body.is-contact .mk .mk-band .s-punch__blur,
.mk .mk-band.-dark .s-punch__blur{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* 黒地の上の文字とボタン */

.mk .mk-band,
body.is-contact .mk .mk-band,
.mk .mk-band.-dark{ color:#fff; }

.mk .mk-band .mk-sectitle__en,
body.is-contact .mk .mk-band .mk-sectitle__en,
.mk .mk-band.-dark .mk-sectitle__en{ color:rgba(255,255,255,.30); }

.mk .mk-band .mk-sectitle__ja,

.mk .mk-band h2,

.mk .mk-band p,
body.is-contact .mk .mk-band h2,
body.is-contact .mk .mk-band p,
.mk .mk-band.-dark .mk-sectitle__ja,
.mk .mk-band.-dark h2,
.mk .mk-band.-dark p{ color:#fff; }
/* CTAボタンは白地・黒文字 */

.mk .mk-band .mk-pill--auto,

.mk .mk-band .mk-btn,
body.is-contact .mk .mk-band .mk-pill--auto,
body.is-contact .mk .mk-band .mk-btn,
.mk .mk-band.-dark .mk-pill--auto,
.mk .mk-band.-dark .mk-btn{
  background:#fff;
  border-color:#fff;
  color:#070c0f;
}

/* =========================================================
   ⑦ 目次 ── 扉（16px lh2.0 字間1.28px / 罫線区切り / 角丸12）
   ========================================================= */
.mk .mk-toc{
  background:#fff;
  border:1px solid rgba(15,21,36,.1);
  border-radius:12px;
  padding:30px;
}
.mk .mk-toc__title{
  font-family:"Hanken Grotesk", sans-serif;
  font-size:20px;
  font-weight:400;
  color:#017cc8;
  letter-spacing:.03em;
  margin-bottom:14px;
}
.mk .mk-toc a{
  display:block;
  font-size:16px;
  line-height:2.0;
  letter-spacing:1.28px;
  color:#0f1524;
  text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid rgba(15,21,36,.06);
}
.mk .mk-toc li:last-child a{ border-bottom:0; }
.mk .mk-toc a:hover{ color:#017cc8; }

/* =========================================================
   ⑧ 表 ── mcframe X（見出しに地色・全罫線・字間 size×0.05）
   ========================================================= */
.mk .mk-datatable{
  border-collapse:collapse;
  width:100%;
  font-size:14px;
}
.mk .mk-datatable th,
.mk .mk-datatable td{
  border:1px solid #dfe6e8;
  padding:12px 15px;
  letter-spacing:.7px;
  line-height:1.7;
  text-align:left;
  vertical-align:top;
}
.mk .mk-datatable th{
  background:#f0f4f5;
  font-weight:700;
  color:#222;
  white-space:nowrap;
}
.mk .mk-datatable td{ color:#222; }

/* =========================================================
   ⑨ FAQ ── Workers Resort 型（罫線だけ）
   ★左に棒を出すデザインは廃止のご指示。mcframe X 型はやめて
     WR の「下罫線だけで区切る」に変更した。
   ========================================================= */
.mk .mk-faq__item{
  border-left:0;
  background:transparent;
  border-bottom:1px solid #e5e5e5;
  border-radius:0;
  padding:18px 0;
  margin-bottom:0;
}
.mk .mk-faq__item:last-child{ border-bottom:0; }
.mk .mk-faq__q{
  font-size:16px;
  font-weight:500;
  line-height:1.75;
  letter-spacing:.02em;
  padding:0;
  color:#0f1524;
}
.mk .mk-faq__a{
  font-size:15px;
  line-height:1.75;
  color:rgba(15,21,36,.66);
  padding:0;
  margin-top:8px;
}

/* =========================================================
   ⑩ 左に棒のあるデザインを廃止（ご指示）
   ---------------------------------------------------------
   既存で使っている2箇所も、罫線か地色だけの形に置き換える。
     mk-base.css:406      .mk-quote
     mk-new-parts.css:304 .mk-article .mk-cite（記事の引用）
   ========================================================= */
.mk .mk-article .mk-cite,
.mk .mk-cite{
  border-left:0 !important;
  border-radius:6px;
  background:rgba(15,21,36,.035);
  padding:20px 24px;
}
.mk .mk-quote{
  border-left:0 !important;
  padding:4px 0;
  /* 棒の代わりに、上下の細い罫線で引用を示す */
  border-top:1px solid rgba(15,21,36,.1);
  border-bottom:1px solid rgba(15,21,36,.1);
  padding-top:16px;
  padding-bottom:16px;
}

/* =========================================================
   ⑪ 青帯は「不透明100%」にする（ご指示）
   ---------------------------------------------------------
   ★元は rgba(0,79,178,.9) → rgba(0,138,222,.9) の 90% 半透明で、
     裏の背景ボールが透けていた。これを不透明にして、青を100%出す。
   ★そのうえで、上に乗るカードは白半透明＋白枠。
   ★青地でないところのカードは、枠を青にする。
   ========================================================= */

/* --- 青帯：不透明にする --- */
.mk .mk-section.s-canary .s-punch{
  background-image:linear-gradient(180deg, rgb(0,79,178) 0%, rgb(0,138,222) 100%);
  background-color:#004fb2;
}
/* 裏が透けないので、ぼかし層は不要 */
.mk .mk-section.s-canary .s-punch__blur{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* --- 青地の上のカード：白半透明＋白枠 --- */
.mk .s-canary .mk-feature{
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(255,255,255,.9) !important;
}
.mk .s-canary .mk-numcard,
.mk .s-canary .mk-numcard--light{
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(255,255,255,.9) !important;
}
/* 青地の上の文字は白のまま */
.mk .mk-section.s-canary .mk-sectitle__en,
.mk .mk-section.s-canary .mk-sectitle__ja,
.mk .mk-section.s-canary h2,
.mk .mk-section.s-canary .mk-lead{ color:#fff; }
/* 青地の上のカードの中身は濃い文字（白いカードの上なので） */
.mk .s-canary .mk-feature,
.mk .s-canary .mk-numcard{ color:#253a4f; }
.mk .s-canary .mk-numcard__title,
.mk .s-canary .mk-feature h3{ color:#0f1524; }
/* 青地の上のタグは白枠・白字 */
.mk .s-canary .mk-tag{
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
/* ただしカードの中に入っているタグは青（白いカードの上だから） */
.mk .s-canary .mk-feature .mk-tag,
.mk .s-canary .mk-numcard .mk-tag{
  border-color:#017cc8;
  color:#017cc8;
}

/* --- 青地でないところのカード：白半透明＋★青の枠 --- */
.mk .mk-section:not(.s-canary) .mk-numcard,
.mk .mk-section:not(.s-canary) .mk-numcard--light{
  background:rgba(255,255,255,.62) !important;
  border:1px solid #017cc8 !important;
}
.mk .mk-case{
  background:rgba(255,255,255,.62);
  border:1px solid #017cc8;
}
.mk .mk-postgrid > a,
.mk .mk-grid3 > a:has(.mk-post__pic){
  background:rgba(255,255,255,.62);
  border:1px solid #017cc8;
}
.mk .mk-btn-card{
  background:rgba(255,255,255,.62);
  border:1px solid #017cc8;
}
.mk .mk-toc{
  background:rgba(255,255,255,.62);
  border:1px solid #017cc8;
}

/* --- 目次の連番が枠から出てしまうので、内側に入れる --- */
.mk .mk-toc ol,
.mk .mk-toc ul{
  padding-left:1.6em;
  margin:0;
}
.mk .mk-toc li{
  margin:0;
}
.mk .mk-toc li::marker{
  color:rgba(15,21,36,.4);
  font-size:12px;
}

/* =========================================================
   ⑬ 2026-08-27 の決定ぶん
     ・Feature（強み）の白が薄い → 濃くする
     ・事例・記事カードの枠は白
     ・文字は C案（英字/和文とも #253a4f・和文 w300）
     ・contact は C（画像16%・グレースケール50%）
     ・フッターは A（#017cc8）
   ========================================================= */

/* --- ① 青帯の上のカードの白を濃くする（62% → 88%） --- */
.mk .s-canary .mk-feature,
.mk .s-canary .mk-numcard,
.mk .s-canary .mk-numcard--light{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.95) !important;
}

/* --- ② 事例・記事カードの枠は「白」 --- */
.mk .mk-case,
.mk .mk-postgrid > a,
.mk .mk-grid3 > a:has(.mk-post__pic),
.mk .mk-postgrid__side .mk-post--sm,
.mk .mk-post--sm{
  background:rgba(255,255,255,.88);
  border:1px solid #ffffff;
}
/* 白地のセクションの番号カード（悩み）は青枠のまま残す */
.mk .mk-section:not(.s-canary) .mk-numcard,
.mk .mk-section:not(.s-canary) .mk-numcard--light{
  background:rgba(255,255,255,.88) !important;
  border:1px solid #017cc8 !important;
}
/* 目次・誘導ボタンも白枠に揃える */
.mk .mk-toc,
.mk .mk-btn-card{
  background:rgba(255,255,255,.88);
  border:1px solid #ffffff;
}
/* ただし記事ページの目次は白い面の上に乗るので、青枠のほうが見える */
.mk .mk-artgrid__main .mk-toc{
  background:#fff;
  border:1px solid #017cc8;
}

/* --- ③ 文字：C案（太さを揃える・色を1系統に） --- */
/* 白地のセクション */
.mk .mk-section:not(.s-canary) .mk-sectitle__en,
.mk .mk-section:not(.s-canary) .mk-sectitle__ja,
.mk .mk-section:not(.s-canary) .mk-head h2{
  color:#253a4f;          /* ★#000 をやめて 1色系に統一 */
}
/* ★mk-final.css / mk-type.css の .mk .mk-head h2{font-weight:500} と
   同じ詳細度なので、!important で上書きする（決定事項3-③の実例）。 */
.mk .mk-section:not(.s-canary) .mk-sectitle__ja,
.mk .mk-section:not(.s-canary) .mk-head h2{
  font-weight:300 !important;   /* ★和文も細く。英字 w200 と線の太さを揃える */
}
/* 青帯のセクション */
.mk .mk-section.s-canary .mk-sectitle__en,
.mk .mk-section.s-canary .mk-sectitle__ja,
.mk .mk-section.s-canary .mk-head h2{
  color:#fff;
}
.mk .mk-section.s-canary .mk-sectitle__ja,
.mk .mk-section.s-canary .mk-head h2{
  font-weight:300 !important;
}
/* 下層ページの h1 も揃える */
.mk .mk-hero h1,
.mk .mk-pagehead h1,
.mk .mk-page__title{
  font-weight:300 !important;
  color:#253a4f;
}
/* ★スマホでは細字が読みにくいので戻す */
@media (max-width:700px){
  .mk .mk-sectitle__ja,
  .mk .mk-head h2,
  .mk .mk-hero h1,
  .mk .mk-pagehead h1,
  .mk .mk-page__title{ font-weight:500 !important; }
}

/* --- ④ contact の帯：C（画像16%・グレースケール50%）
   ★この「Contact」の帯は contact ページ専用ではなく、
     トップ・事例・会社・サービス・記事の全ページ末尾に出る共通部品だった。
     body:has(.mk-contact) だと /contact/ にしか効かないので、
     .mk-band 全体に当てる。 --- */

.mk .mk-band .s-punch,
.mk .mk-band.-dark .s-punch{
  background-image:
    linear-gradient(180deg, rgba(7,12,15,.90) 0%, rgba(7,12,15,.96) 100%),
    url("/_shared/img/top-01-website.webp");
  background-size:cover, cover;
  background-position:center, center;
  background-color:#070c0f;
}
/* 画像を16%相当まで落とすため、黒のグラデを濃くしてある（上の .90/.96） */

.mk .mk-band .s-punch{
  filter:grayscale(.5);
}

/* --- ⑤ フッター：A（#017cc8） --- */
.mk-ftr{
  background:#017cc8;
  border-radius:48px 48px 0 0;
  color:#fff;
}
.mk-ftr__btn{
  background:#fff;
  border-radius:9999px;
  border:0;
}
.mk-ftr__btn,
.mk-ftr__btn *,
.mk-ftr a.mk-ftr__btn,
.mk-ftr .mk-ftr__btn span,
.mk-ftr .mk-ftr__btn p{ color:#017cc8; }
.mk-ftr__btn svg{ fill:#017cc8; stroke:#017cc8; }

/* =========================================================
   ⑭ 透明度をそろえる ＋ 強みをサービスと同じカードに
   ---------------------------------------------------------
   実測（2026-08-27）
     サービス #service  .mk-feature  角丸16px 内0 画像＋本文の2カラム(392/846)
     悩み     #issue    .mk-numcard  角丸12px 内32px 縦積み 3列
     強み     #feature  .mk-numcard  角丸12px 内40px 縦積み 3列
   → 3つとも 白88% に統一し、強みの角丸・内側をサービスに合わせる。
   ========================================================= */

/* --- 透明度を3セクションで完全に同じにする --- */
.mk #service .mk-feature,
.mk #issue .mk-numcard,
.mk #issue .mk-numcard--light,
.mk #feature .mk-numcard,
.mk #feature .mk-numcard--light{
  background:rgba(255,255,255,.88) !important;
}

/* --- 強み：サービスと同じカードの作りに寄せる --- */
.mk #feature .mk-numcard,
.mk #feature .mk-numcard--light{
  border-radius:16px !important;   /* 12px → 16px（サービスと同じ） */
  padding:32px !important;         /* 40px → 32px（悩みと同じに統一） */
  border:1px solid rgba(255,255,255,.95) !important;
}
/* 悩みも内側を揃える（もともと32px なのでそのまま） */
.mk #issue .mk-numcard,
.mk #issue .mk-numcard--light{
  border-radius:16px !important;
  padding:32px !important;
}

/* =========================================================
   ⑮ タイトルと最初のセクションが離れすぎ（ご指摘）
   ---------------------------------------------------------
   実測: .mk-pagehead の padding-bottom 62px
       ＋ 最初の .mk-section の余白 135px ＝ 合計197px の空白
   → 合計 96px 程度に詰める。
   ========================================================= */
.mk .mk-pagehead{
  padding-bottom:24px;
}
/* ページ見出しの直後のセクションだけ、上の余白を詰める
   ★実測: .mk-pagehead の次は <div class="s-tint"> という
     ラッパーで、その中に .mk-section が入っている。
     直接の隣接（+ .mk-section）では届かない。 */
.mk .mk-pagehead + .mk-section,
.mk .mk-pagehead + .s-tint > .mk-section:first-child,
.mk .mk-pagehead + .s-tint,
.mk .mk-pagehead + div > .mk-section:first-child{
  padding-top:72px !important;
}
/* s-tint 自体が余白を持っている場合も詰める */
.mk .mk-pagehead + .s-tint{ margin-top:0 !important; }
/* トップの1枚目も同じ考え方 */
.mk .mk-hero + .mk-section,
.mk .mk-hero + div > .mk-section:first-child{
  padding-top:72px !important;
}

/* =========================================================
   ⑯ Contact の帯 ── いったん元に戻す
   ★カード化＋真っ黒は「ダサい」とのご指摘。比較ページを作って選び直す。
     ここでは s-punch を消さず、元のくり抜き構造を保つ。
   ========================================================= */

/* =========================================================
   ⑯ Contact の帯 ── D案（#0f1524 に画像20%）
   幅は他のカードと同じ左右100px・中央のカードとして置く
   ---------------------------------------------------------
   実測（1440px時）：カード類は left/right とも 100px、内容幅1240px
   ========================================================= */

/* 帯そのものは余白だけ持たせる。地は外す */
.mk .mk-band{
  padding:96px 0 !important;
  background:transparent !important;
  border-radius:0 !important;
}
/* 元の青いくり抜き層は使わない（Dは黒＋画像なので） */
.mk .mk-band > .s-punch,
.mk .mk-band > .s-punch__blur{ display:none !important; }

/* 中身を「中央のカード」にする。左右100pxで他のカードと揃える */
.mk .mk-band .mk-container{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:64px 56px !important;
  background:
    linear-gradient(180deg, rgba(15,21,36,.80) 0%, rgba(15,21,36,.80) 100%),
    url("/_shared/img/top-01-website.webp");
  background-size:cover, cover;
  background-position:center, center;
  background-color:#0f1524;
  border-radius:24px;
  color:#fff;
  overflow:hidden;
}
@media (max-width:1100px){
  .mk .mk-band .mk-container{ margin:0 40px !important; padding:52px 36px !important; }
}
@media (max-width:700px){
  .mk .mk-band{ padding:64px 0 !important; }
  .mk .mk-band .mk-container{ margin:0 20px !important; padding:36px 24px !important;
    border-radius:16px; }
}

/* 中の文字 */
.mk .mk-band .mk-sectitle__en{
  font-size:clamp(34px,4.4vw,52px) !important;
  color:rgba(255,255,255,.30) !important;
  margin-bottom:4px !important;
}
.mk .mk-band .mk-sectitle__ja,
.mk .mk-band h2{
  font-size:clamp(20px,2.2vw,26px) !important;
  color:#fff !important;
}
.mk .mk-band p,
.mk .mk-band .mk-lead{
  font-size:15px !important;
  line-height:1.9 !important;
  color:rgba(255,255,255,.88) !important;
}
/* 主ボタン（.mk-btn-round）は白地・黒文字 */
.mk .mk-band .mk-btn-round{
  background:#fff !important;
  border-color:#fff !important;
  color:#0f1524 !important;
  height:60px !important;
  font-size:16px !important;
  padding:0 12px 0 32px !important;
}
.mk .mk-band .mk-btn-round span,
.mk .mk-band .mk-btn-round p{ color:#0f1524 !important; }
.mk .mk-band .mk-btn-round .mk-btn-round__ico{
  background:#017cc8 !important; color:#fff !important;
}
/* 誘導カード2枚は白のまま残す（黒地の上で映える） */
.mk .mk-band .mk-btn-card{
  background:#fff !important;
  border:1px solid #fff !important;
  border-radius:14px !important;
  padding:20px 78px 20px 22px !important;
  position:relative;
}
.mk .mk-band .mk-btn-card__title{ font-size:17px !important; color:#0f1524 !important; }
.mk .mk-band .mk-btn-card__desc{ font-size:13px !important; color:rgba(15,21,36,.62) !important; }
.mk .mk-band .mk-btn-card__ico{ right:20px !important; left:auto !important; }

/* =========================================================
   ⑰ Contact の文字を、他のセクションと揃える（ご指示）
   ---------------------------------------------------------
   実測でわかったズレ
     本文     サイト 16px lh2.0 字間1.44px ／ contact 15px lh1.9 字間0.45px
     英字     サイト 82px w200 字間-2.46px ／ contact 52px w200（別指定）
     見出し   サイト 36px w300 字間2.16px  ／ contact 26px w500（太い）
     ボタン   サイト 44px w500 字間0.45px  ／ contact 60px 字間1.44px
   → すべてサイト側の値に合わせる。大きさだけカードに収まるよう比率で下げる。
   ========================================================= */

/* 英字 ── サイトと同じ w200・同じ字間の詰め方 */
.mk .mk-band .mk-sectitle__en{
  font-family:"Hanken Grotesk", sans-serif !important;
  font-size:clamp(38px,4.6vw,56px) !important;
  font-weight:200 !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
  color:rgba(255,255,255,.32) !important;
  margin-bottom:4px !important;
}
/* 和文の見出し ── サイトと同じ w300・字間.06em */
.mk .mk-band .mk-sectitle__ja,
.mk .mk-band h2{
  font-size:clamp(22px,2.4vw,28px) !important;
  font-weight:300 !important;
  line-height:1.6 !important;
  letter-spacing:.06em !important;
  color:#fff !important;
}
/* 本文 ── サイトと同じ 16px / lh2.0 / 字間1.44px */
.mk .mk-band p,
.mk .mk-band .mk-lead{
  font-size:16px !important;
  line-height:2.0 !important;
  letter-spacing:1.44px !important;
  color:rgba(255,255,255,.9) !important;
}
/* 電話番号など小さい行 */
.mk .mk-band .mk-case__client,
.mk .mk-band .mk-post__meta{
  font-size:14px !important;
  letter-spacing:1.26px !important;
  color:rgba(255,255,255,.8) !important;
}
/* 主ボタン ── ヘッダーのボタンと同じ 44px / 15px / w500 */
.mk .mk-band .mk-btn-round{
  height:52px !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.45px !important;
  padding:0 10px 0 30px !important;
}
/* 誘導カードの文字もサイトの本文に合わせる */
.mk .mk-band .mk-btn-card__title{
  font-size:18px !important;
  font-weight:500 !important;
  letter-spacing:1.44px !important;
}
.mk .mk-band .mk-btn-card__desc{
  font-size:14px !important;
  line-height:1.8 !important;
  letter-spacing:1.26px !important;
}

/* =========================================================
   ⑱ ヘッダーが浮いて見える（ご指摘）
   ---------------------------------------------------------
   実測: 白80%＋blur(8px)＋白い罫線。
     ページの地が「白＋薄い青の丸」なので、白い帯だけが板のように浮く。
   → 地をもっと透かし、罫線を青系の細い線にして、境目を柔らかくする。
   ========================================================= */
.mk-hdr{
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4) !important;
  backdrop-filter:blur(14px) saturate(1.4) !important;
  border-bottom:1px solid rgba(1,124,200,.12) !important;
  box-shadow:none !important;
}
/* 2つのボタンが同じ青で見分けがつかないので、副ボタンを枠だけにする
   （扉の pill 3種の考え方：主=塗り／副=枠だけ） */
.mk-hdr__btn--sub{
  background:transparent !important;
  border:1px solid #017cc8 !important;
  color:#017cc8 !important;
}
.mk-hdr__btn--sub:hover{
  background:rgba(1,124,200,.08) !important;
}
/* ナビの文字をサイトの字間に合わせる */
.mk-hdr__item{
  letter-spacing:1.26px;
}

/* =========================================================
   ⑲ 記事下の「関連する事例」カードの崩れ
   ---------------------------------------------------------
   ★原因（実測）
     カード側     padding:16px（articles.py が inline style で付けている）
     中の要素側   padding:20px（私が ⑤ で足した .mk-case 用の指定）
     → 二重に効いて、画像が角丸からはみ出し、余白も不揃いだった。
   → カードの内側 padding を 0 にして、中の要素だけで余白を作る。
   ========================================================= */
.mk .mk-article .mk-case.c-card,
.mk .mk-artgrid__main .mk-case.c-card{
  padding:0 !important;
  overflow:hidden;
  background:rgba(255,255,255,.88);
  border:1px solid #fff;
  border-radius:12px;
  display:block;
}
/* 画像はカードの上端いっぱい・角丸なし（親の overflow:hidden で丸まる） */
.mk .mk-case.c-card .mk-case__pic{
  margin:0;
  border-radius:0;
  aspect-ratio:4/3;
  overflow:hidden;
}
.mk .mk-case.c-card .mk-case__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* 画像より下は内側 24px で揃える */
.mk .mk-case.c-card .mk-post__tags{ padding:20px 24px 0 !important; margin:0; }
.mk .mk-case.c-card .mk-case__title{
  padding:12px 24px 0 !important; margin:0;
  font-size:20px; font-weight:500; line-height:1.5; letter-spacing:.02em;
  border-bottom:0;
}
.mk .mk-case.c-card .mk-case__client{
  padding:6px 24px 0 !important; margin:0;
  font-size:14px; line-height:1.75; color:rgba(15,21,36,.55);
}
.mk .mk-case.c-card .mk-numcard__text{
  padding:8px 24px 24px !important; margin:0 !important;
  font-size:14px; line-height:1.8; color:rgba(15,21,36,.7);
}