/* ==========================================================================
   すりガラス　── セクションとカードを半透明＋ぼかしにして、後ろの粒を見せる
   2026-08-07 riho さん「ファーストビューだけでなく、すべてのセクションを
                        すりガラス風にして、後ろのブロックが見えるように」

   考え方
     背景の粒は z-index:-1（本文の後ろ）にいる。
     これまでは セクションとカードが「不透明な地」だったので、
     粒が見えるのは FV と セクションの間の余白だけだった。
     そこで、地を持っている部品を全部
       ・色を半透明にする
       ・backdrop-filter でぼかす
     に置き換える。ぼかしを入れることで、後ろの粒がにじんで見え、
     文字は読めるまま保てる。

   透け具合の決め方（読みやすさを落とさない範囲）
     白いカード      白 72%  ＋ ぼかし 14px
     淡いグレーの帯   白 55%  ＋ ぼかし 18px
     青いセクション   青 86%  ＋ ぼかし 18px   ← 白文字なので濃いめに残す
     フッター        青 88%  ＋ ぼかし 18px
     ヘッダー        白 80%  ＋ ぼかし 8px（前から すりガラス。そのまま）

   ★このファイルを読み込まなければ、すべて元の不透明に戻ります。
   ========================================================================== */


/* --- 淡いグレーの帯（よくある状態・いま起きていること）---------------------- */
.mk .s-tint{
  background-image:linear-gradient(216deg, rgba(255,255,255,.9) -1.54%, rgba(226,236,244,.86) 83.2%);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}


/* --- 青いセクション（トップの業務／できること／扱うテーマ）------------------ */
/* ★2026-08-07 riho さん「service が contact より色が濃い。同じくらいに」
   実測すると、指定は service .68 / contact .72 で contact のほうが濃いのに、
   画面では service が濃く出ていた（左端の実際の色 service 20,84,145 / contact 71,130,192）。
   原因は セクションの高さ。service は3570px、contact は833px。
   グラデがセクションの高さいっぱいに伸びるので、
   背の高い service は画面に「濃いほうの端」ばかりが出ていた。
   → background-attachment:fixed にして、グラデを画面の高さに固定した。
     これで高さに関係なく、どのセクションも同じ色になる。 */
/* ★2026-08-07 riho さん
     「白色透明の下を青が重ならないように、カードの下だけ青が通らないようにできる？」
     → 青の地を セクション本体から 専用の層（.s-punch）に移し、
       カードの形に穴をあけている（JSがカードの位置を測ってマスクを作る）。
       これでカードの下は 青ではなく ページの地（白＋薄い青の丸）が見える。 */
.mk .mk-section.s-canary,
.mk.p-op #feature,
.mk.p-tool #theme{
  position:relative;
  background-image:none;
}
/* ★2026-08-07 riho さん決定：案5（やや濃いめ）＋「もう少し青っぽく、赤を落とす」
   ★2026-08-07 riho さん決定：/parts8 の総当たりから「透け90％ ／ k1.00」
       元の色      #004fb2 → #008ade（透け90％）
       画面での色   rgb(26,97,186) → rgb(26,150,226)
       白文字のコントラスト 6.1:1（目安4.5以上 ○）
     k=1.00 は「赤の底上げぶん、緑と青を同じ比で持ち上げる」＝色あいが元の青と同じ。
     透け85％なので赤の底上げは38まで下がり、紫みも出ない。
   ★backdrop-filter を付けると mask（穴あけ）が効かなくなる。実測で確認：
     ぼかしあり → カード内 (34,98,181)＝青が通る／ぼかしなし → (232,244,251)＝穴が開く。
     ぼかしは別の層（.s-punch__blur）に持たせ、こちらは穴あけ専用にしている。 */
/* ぼかしだけを持つ層（穴はあけない） */
.mk .s-punch__blur{
  position:absolute; inset:0; z-index:0;
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  pointer-events:none;
}
.mk .s-punch{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(180deg, rgba(0,79,178,.9) 0%, rgba(0,138,222,.9) 100%);
  background-attachment:fixed;
  background-size:100% 100%;
  pointer-events:none;
}
/* 中身は青の層より前に出す */
.mk .mk-section.s-canary > *:not(.s-punch):not(.s-punch__blur),
.mk.p-op #feature > *:not(.s-punch):not(.s-punch__blur),
.mk.p-tool #theme > *:not(.s-punch):not(.s-punch__blur){position:relative;z-index:1;}
.mk .s-punch{z-index:0;}

/* CTAの帯は穴をあけないので、これまでどおりセクション本体に地を持たせる */


/* 青い箱（.s-blue。いまは使っていないが、戻したときのために揃えておく） */
.mk .s-blue{
  background-image:linear-gradient(140deg, rgba(2,210,251,.86) 3.32%, rgba(6,81,232,.86) 96.51%);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}


/* CTAの帯も、青いセクションと同じ「層に分ける」作りにする（カードをくり抜くため） */
.mk .mk-band{position:relative;background-image:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.mk .mk-band > *:not(.s-punch):not(.s-punch__blur){position:relative;z-index:1;}


/* --- 白いカード類 ----------------------------------------------------------- */
.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.c-card,
.mk .mk-post--sm.c-card,
.mk .c-card{
  background-color:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* 青い地の上に乗るカード
   ★2026-08-07 riho さん
     「ぼかしは不要。カードを青の上で透かすのではなく、
       その部分だけ穴あきで青が通らないようにできる？」
     → 半透明＋ぼかし をやめて、不透明の白にした。
       青はカードの下を通らないので、実際に「穴があいている」状態と同じ見え方になる。
       ぼかし（backdrop-filter）も外している。 */
.mk .s-canary .mk-feature,
.mk.p-op #feature .mk-usecard,
.mk.p-tool #theme .mk-feature,
.mk .mk-band .mk-btn-card,
.mk .mk-band .mk-btn-round{
  /* ★2026-08-07 「白の背景が重なって不透明。後ろの丸だけが透けるように」
     実測すると重なりは無く、原因は2つだった。
       ・白が45％と濃かった
       ・ぼかし24pxが 後ろの丸をならして、ほぼ白一色にしていた
     → 白を30％まで下げ、ぼかしを外した。丸の形がそのまま出る。 */
  background-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
}


/* --- ボタン・ピル・タグ ------------------------------------------------------ */
.mk a.mk-pill,
.mk a.mk-pill--auto,
.mk .mk-pill,
.mk .mk-pill--auto{background-color:rgba(1,124,200,.9);}
.mk .mk-tag{background-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
/* ★塗りつぶしのタグ（新着）は、上の指定に負けて 白地に白文字＝見えなくなっていた */
.mk .mk-tag--fill{background-color:#017cc8;border-color:#017cc8;color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.mk .mk-filter__tab{background-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.mk .mk-slider__arrow{background-color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
/* 青い地の上のピル・タグは白いまま（読めなくなるため） */
.mk .s-canary .mk-feature .mk-pill,
.mk .s-canary .mk-feature .mk-pill--auto,
.mk.p-tool #theme .mk-feature .mk-pill,
.mk.p-tool #theme .mk-feature .mk-pill--auto{background-color:rgba(1,124,200,.92);}
.mk .s-canary .mk-pill,
.mk .s-canary .mk-pill--auto,
.mk.p-op #feature .mk-pill,
.mk.p-op #feature .mk-pill--auto,
.mk .mk-band .mk-pill,
.mk .mk-band .mk-pill--auto{background-color:rgba(255,255,255,.92);}


/* --- 入力欄（お問い合わせ）--------------------------------------------------- */
.mk .mk-form input[type=text],
.mk .mk-form input[type=email],
.mk .mk-form input[type=tel],
.mk .mk-form select,
.mk .mk-form textarea{
  background-color:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}


/* --- 図の中の小箱・ダミー画像 ------------------------------------------------ */
.mk .mk-diagram__row span{background-color:rgba(255,255,255,.6);}
.mk .mk-case__pic,
.mk .mk-post__pic,
.mk .mk-feature__pic,
.mk .mk-split__pic,
.mk .mk-usecard__pic{background-color:rgba(37,58,79,.05);}
.mk .mk-logos__row span{background-color:rgba(37,58,79,.05);}


/* --- フッター ---------------------------------------------------------------- */
.mk-ftr{
  background-color:rgba(1,124,200,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}


/* --- ぼかしが使えないブラウザ向けの保険 --------------------------------------
   backdrop-filter に対応していない場合は、透けさせず元の不透明に戻す。
   （半透明のまま ぼかしが効かないと、粒がそのまま透けて文字が読みにくくなるため） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .mk .s-tint{background-image:linear-gradient(216deg,rgba(37,58,79,.02) -1.54%,rgba(37,58,79,.06) 83.2%);}
  .mk .mk-section.s-canary,
  .mk.p-op #feature,
  .mk.p-tool #theme,
  .mk .mk-band{background-image:linear-gradient(180deg,#0047a0 0%,#007cc8 100%);}
  .mk .mk-feature,.mk .mk-usecard,.mk .mk-numcard,.mk .mk-diagram,
  .mk .mk-callout,.mk .mk-btn-card,.mk .c-specbox,.mk .c-card{background-color:#fff;}
  .mk-ftr{background-color:#017cc8;}
}


/* --- 動きを止めているときは、ぼかしも軽くする（負荷を下げる）------------------ */
html.-reduced-motion .mk .s-tint,
html.-reduced-motion .mk .mk-section.s-canary,
html.-reduced-motion .mk.p-op #feature,
html.-reduced-motion .mk.p-tool #theme,
html.-reduced-motion .mk .mk-band,
html.-reduced-motion .mk-ftr{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}


/* ==========================================================================
   青いセクションの角丸　── 上は左だけ／下は右だけ
   2026-08-07 riho さん「contactみたいに左だけ角丸にして、終了は右角丸にしたい」
   ========================================================================== */
/* ★2026-08-07 「できることセクションの角丸はいらない」
   トップの Service と CTA の帯だけ角丸を残し、
   業務ページ・ツールページの青いセクションは角なしにする。 */
.mk .mk-section.s-canary{
  border-radius:120px 0 120px 0;   /* 左上 ／ 右上 ／ 右下 ／ 左下 */
  overflow:hidden;
}
.mk.p-op #feature,
.mk.p-tool #theme{border-radius:0;overflow:hidden;}
@media (max-width:900px){
  .mk .mk-section.s-canary{border-radius:60px 0 60px 0;}
}


/* ==========================================================================
   2026-08-07 riho さんの指示
     ・サービスの上下の余白をもう少しだけ増やす
     ・カード・写真・ヘッダーの下に白い線をつける
   ========================================================================== */

/* 上下の余白 135px → 170px */
.mk .mk-section.s-canary,
.mk.p-op #feature,
.mk.p-tool #theme{padding-top:170px;padding-bottom:170px;}
@media (max-width:900px){
  .mk .mk-section.s-canary,
  .mk.p-op #feature,
  .mk.p-tool #theme{padding-top:90px;padding-bottom:90px;}
}

/* --- 下に白い線（ガラスの縁）------------------------------------------------
   カード・写真・ヘッダーの下端に、うっすら白い線を1本入れる。
   影は使わずに、面の境目をはっきりさせるため。 */
/* ★2026-08-07 青い地の上のカードは、白い線があると「もう1枚重なっている」ように
   見えるので線を外す。白いセクションの上のカードには残す。 */
.mk .mk-numcard,
.mk .mk-diagram,
.mk .c-specbox,
.mk .c-card,
.mk .mk-case.c-card{
  border-bottom:1px solid rgba(255,255,255,.7);
}
.mk .mk-case__pic,
.mk .mk-post__pic,
.mk .mk-feature__pic,
.mk .mk-split__pic,
.mk .mk-usecard__pic{
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.7);
}
.mk-hdr{border-bottom:1px solid rgba(255,255,255,.7);}


/* ==========================================================================
   2026-08-07 riho さんの指示（まとめ）
   ========================================================================== */

/* --- ① ファーストビューだけ白。他は淡いグレーの地にする ---------------------- */
body{
  background-image:linear-gradient(216deg, rgba(255,255,255,.55) -1.54%, rgba(226,236,244,.5) 83.2%);
  background-attachment:fixed;
}
.s-laboro{background:transparent;}          /* FVは地を持たない＝白 */
.mk .mk-pagehead{background:transparent;}

/* --- ③ よくある状態のカード・図のカードも透明に ------------------------------ */
.mk .mk-numcard,
.mk .mk-diagram,
.mk .c-card,
.mk .mk-case.c-card,
.mk .mk-post--sm.c-card,
.mk .c-specbox{
  background-color:rgba(255,255,255,.45);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:0;
}
.mk.p-op #issue .mk-numcard{background-color:rgba(255,255,255,.45);}

/* --- ④ CTAの帯：上も角丸にする ---------------------------------------------- */
.mk .mk-band{border-radius:120px 0 120px 0;overflow:hidden;}
@media (max-width:900px){ .mk .mk-band{border-radius:60px 0 60px 0;} }

/* --- ⑤ 記事・事例のページ見出しはグラデをやめて、少し小さく ------------------ */
/* ★業務ページ・ツールページは .mk.p-op 側の指定（グラデ）のほうが強いので、
     そちらも並べて打ち消す。 */
.mk .mk-pagehead h1,
.mk.p-op .mk-pagehead h1,
.mk.p-tool .mk-pagehead h1,
.mk.p-column .mk-pagehead h1{
  background-image:none;
  color:#253a4f;
  -webkit-text-fill-color:#253a4f;
  font-size:clamp(26px, 1.71vw + 19.3px, 44px);
  line-height:1.35;
}

/* --- ⑥ 文字の黒を careers.kk-ems.jp の実測値に ------------------------------
   ems の --color-black は #253a4f（黒に近い紺）。トビラの #253a4f より少し柔らかい。 */
:root{ --mk-ink:#253a4f; }