@charset "utf-8";
/* =========================================================
   mk-mix.css ── riho さんが部品ごとに選んだ型を当てるレイヤー
   2026-08-27 / 検討用。★本番未反映
   ---------------------------------------------------------
   ① 英字ラベル  Canary   ② 番号カード  扉      ③ タグ      扉
   ④ ボタン      いまのまま  ⑤ 事例カード  扉    ⑥ 記事カード いまのまま
   ⑦ 区切り      Canary   ⑧ リード文    扉      ⑨ 表        ナノック
   ⑩ CTA        Canary   ⑪ フッター    Canary
   記事の見出し周り  Workers Resort

   ★既存クラスは書き換えず、このファイルを最後に読ませて上書きするだけ。
   ★読み込みを外せば完全に元に戻る。
   ========================================================= */

:root{
  /* Canary 実測 */
  --mx-cy:      #00BBD5;
  --mx-cy-lt:   #00E0FF;
  --mx-tint-a:  #F9FBFC;
  --mx-tint-b:  #E7F0F5;
  --mx-line-ca: #E6ECF2;
  --mx-sub-ca:  #A2B0C1;
  /* 扉 実測 */
  --mx-ink:     #0f1524;
  --mx-blue:    #017cc8;
  --mx-ink-10:  rgba(15,21,36,.1);
  --mx-ink-06:  rgba(15,21,36,.06);
  --mx-ink-50:  rgba(15,21,36,.5);
  /* ナノック 実測 */
  --mx-na-line: #e5e5e5;
}

/* =========================================================
   ① 英字ラベル ── Canary（82px w200 極細）
   実測: 120px w200 lh1.1 ls-3.6px / 48px w200 lh0.75
   ★白地と青帯の2種類があるので、色は継承させたまま形だけ変える
   ========================================================= */
/* 親は display:flex / align-items:baseline なので、まず縦積みに変える
   （mk-base.css:74）。英字を1行目、和文を2行目に置く。 */
.mk .mk-sectitle{
  display:block;
  margin-bottom:18px;
}
.mk .mk-sectitle__en{
  font-family:"Hanken Grotesk", sans-serif;
  font-size:clamp(40px, 5.7vw, 82px);
  font-weight:200;
  line-height:1.05;
  letter-spacing:-.03em;
  display:block;
  padding-left:0;          /* mk-base.css の 38px を打ち消す */
  margin-bottom:2px;
}
/* 斜線の飾りは巨大英字と競合するので消す（mk-base.css:77） */
.mk .mk-sectitle__en::before{ display:none; }

/* 和文の見出しは Canary の 42px w500 lh1.5 */
.mk .mk-sectitle__ja{
  display:block;
  margin-left:0;           /* mk-base.css の 27px を打ち消す */
  font-size:clamp(26px, 2.9vw, 42px);
  line-height:1.5;
  font-weight:500;
  letter-spacing:.03em;
}
.mk .mk-sectitle__ja::before{ display:none; }   /* 縦棒の飾りも消す */

/* 白地のセクション（Issue / Case study / Blog）＝ Canary の黒 */
.mk .mk-section:not(.s-canary) .mk-sectitle__en,
.mk .mk-section:not(.s-canary) .mk-sectitle__ja{ color:#000; }
/* 青帯のセクション（Service / Feature）＝ 白。薄めず不透明に */
.mk .mk-section.s-canary .mk-sectitle__en,
.mk .mk-section.s-canary .mk-sectitle__ja{ color:#fff; }

/* =========================================================
   ② 番号カード ── 扉（枠 #0f1524 / 角丸12 / 内側40px）
   実測: .tb-card{border:1px solid; border-radius:12px; padding:40px}
         STEPカード・職種カードの枠は #0f1524 べた（114箇所）
   ========================================================= */
/* ★実物は class="mk-numcard mk-numcard--light" が付いており、
   mk-base.css:211 の .mk .mk-numcard--light{border-color} と
   mk-new-parts.css:355 の .mk .s-canary .mk-numcard{...} が
   同等以上の詳細度で後から効いている。修飾子まで含めて指定する。 */
.mk .mk-numcard,
.mk .mk-numcard--light,
.mk .s-canary .mk-numcard,
.mk .s-canary .mk-numcard--light{
  background:#fff;
  /* ★mk-new-parts.css:xxx が border:...!important を持っているため、
     こちらも !important でないと勝てない（決定事項3-③の「後から読まれるものが
     前を打ち消す」の実例）。 */
  border:1px solid var(--mx-ink) !important;
  border-radius:12px;
  padding:40px;
  box-shadow:none;
}
/* 連番は扉の欧文 20px 青。
   mk-type.css / mk-step13 / mk-step14 が clamp で 10.92px に落としているので
   そちらより強い詳細度で戻す。 */
.mk .mk-numcard .mk-numcard__no,
.mk .mk-numcard--light .mk-numcard__no,
.mk .s-canary .mk-numcard__no{
  font-family:"Hanken Grotesk", sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:1;
  color:var(--mx-blue);
  letter-spacing:.03em;
}
/* 見出しは扉の 24px w400 lh1.5 ls0.72px */
.mk .mk-numcard .mk-numcard__title,
.mk .mk-numcard--light .mk-numcard__title{
  font-size:24px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.72px;
  color:var(--mx-ink);
}
.mk .mk-numcard .mk-numcard__list,
.mk .mk-numcard--light .mk-numcard__list{
  font-size:16px;
  line-height:2.0;
  letter-spacing:1.28px;
  color:var(--mx-ink);
}

/* =========================================================
   ③ タグ ── 扉（14px w500 / pill / 高さ32px / 内側22px）
   実測: .tb-btn-space.-sm{height:32px; padding-inline:22px}
         .tb-ja-14m{14px w500 ls1.28px color #017cc8}
   ========================================================= */
.mk .mk-tag{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 22px;
  border-radius:9999px;
  border:1px solid var(--mx-blue);
  background:transparent;
  color:var(--mx-blue);
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:1.28px;
}
/* 青帯の上のタグは白枠・白字 */
.mk .s-canary .mk-tag{
  border-color:rgba(255,255,255,.55);
  color:#fff;
}

/* =========================================================
   ⑤ 事例カード ── 扉（枠 rgba(15,21,36,.1) / 角丸12 / 罫線区切り）
   実測: .tb-border-card 120箇所 / .tb-hr = 1px rgba(15,21,36,.06)
   ========================================================= */
.mk .mk-case{
  border:1px solid var(--mx-ink-10);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  background:#fff;
}
.mk .mk-case__pic{
  border-radius:0;
  margin:0;
}
/* 画像より下に内側余白をつける */
.mk .mk-case__pic ~ *{ padding-left:24px; padding-right:24px; }
.mk .mk-case__pic + *{ padding-top:20px; }
.mk .mk-case > *:last-child{ padding-bottom:24px; }

.mk .mk-case__title{
  font-size:24px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.72px;
  color:var(--mx-ink);
  margin-top:12px;
  /* 扉は見出しの下に罫線を敷く */
  padding-bottom:16px;
  border-bottom:1px solid var(--mx-ink-06);
}
.mk .mk-case__client{
  font-size:16px;
  line-height:2.0;
  letter-spacing:1.28px;
  color:var(--mx-ink-50);
}

/* =========================================================
   ⑦ セクションの区切り ── Canary
   実測: 青帯 linear-gradient(140deg,#02D2FB 3.32%,#0651E8 96.51%)
         淡グレー帯 linear-gradient(216deg,#F9FBFC -1.54%,#E7F0F5 83.2%)
   ★「軽い区切り」が無かったので、淡グラデ帯を新設する
   ========================================================= */
/* ★★重要（2026-08-27 の実測で判明）
   青帯は .mk-section.s-canary 自体ではなく、その中の子要素
   <div class="s-punch"> が linear-gradient で描いている。
   セクション本体に background を足すと、上に乗る
   .mk-feature（rgba(255,255,255,.18) の半透明）を透かして
   二重の青が見えてしまう。★ここには background を書かない。 */

/* 角丸だけ Canary に寄せる（実測 --c-r-box:24px / --c-r-ftr:48px） */
.mk .mk-section.s-canary{ border-radius:48px 0; }
.mk .mk-section.s-canary .s-punch{ border-radius:48px 0; }

/* 新設：軽い区切り。色を持たないセクション用なので二重にならない。
   使いたいセクションに .s-tint を足して使う。 */
.mk .mk-section.s-tint{
  background:linear-gradient(216deg,var(--mx-tint-a) -1.54%,var(--mx-tint-b) 83.2%);
  border-radius:48px 0;
}

/* =========================================================
   ⑧ リード文 ── 扉（16px lh2.0 字間1.28px）
   実測: .tb-ja-16{16px w400 lh32px ls1.28px} ★本文の基本形
   ========================================================= */
.mk .mk-lead{
  font-size:16px;
  font-weight:400;
  line-height:2.0;
  letter-spacing:1.28px;
  max-width:56ch;
}

/* =========================================================
   ⑨ 表 ── ナノック（16px lh1.81 / 罫線 #e5e5e5 / 角丸0）
   実測: 16px w400 lh1.81 color #070e10
   ========================================================= */
.mk .mk-table,
.mk .c-spec{
  border-collapse:collapse;
  width:100%;
}
.mk .mk-table th, .mk .mk-table td,
.mk .c-spec th,  .mk .c-spec td{
  font-size:16px;
  line-height:1.81;
  padding:14px 0;
  border-bottom:1px solid var(--mx-na-line);
  border-radius:0;
  vertical-align:top;
  text-align:left;
}
.mk .mk-table th, .mk .c-spec th{
  font-weight:700;
  color:#070e10;
  width:9em;
  white-space:nowrap;
}
.mk .mk-table td, .mk .c-spec td{
  font-weight:400;
  color:#070e10;
}
.mk .mk-table tr:last-child th,
.mk .mk-table tr:last-child td,
.mk .c-spec tr:last-child th,
.mk .c-spec tr:last-child td{ border-bottom:0; }

/* =========================================================
   ⑩ CTA ── Canary（青グラデ＋白い pill ボタン）
   ========================================================= */
.mk .mk-btn-card{
  background:linear-gradient(216deg,var(--mx-tint-a) -1.54%,var(--mx-tint-b) 83.2%);
  border:1px solid var(--mx-line-ca);
  border-radius:24px;
}
.mk .mk-btn-card__title{
  font-size:24px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.9px;
  color:#000;
}
.mk .mk-btn-card__desc{
  font-size:14px;
  font-weight:600;
  line-height:1.8;
  letter-spacing:1.4px;
  color:var(--mx-sub-ca);
}

/* =========================================================
   ⑪ フッター ── Canary（上端角丸48px・水色地）
   実測: --c-r-ftr: 48px / フッターの地は #00BBD5 / 文字は白
   ★実物のフッターは <footer class="mk-ftr">。
     .mk-foot は「View all」の行なので別物（間違えやすい）。
   ========================================================= */
.mk-ftr{
  background:var(--mx-cy);
  border-radius:48px 48px 0 0;
  color:#fff;
}
.mk-ftr a,
.mk-ftr p,
.mk-ftr li{ color:#fff; }
.mk-ftr__col > p{
  font-size:14px;
  font-weight:700;
  letter-spacing:1.4px;
  color:#fff;
  opacity:.95;
}
.mk-ftr__col li a{
  font-size:14px;
  font-weight:600;
  letter-spacing:1.4px;
  opacity:.88;
}
.mk-ftr__col li a:hover{ opacity:1; }
.mk-ftr__legal,
.mk-ftr__legal span{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.3px;
  color:#fff;
  opacity:.78;
}
/* フッター内のボタンは白地・水色文字の pill
   ★.mk-ftr a{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:var(--mx-cy); }
/* 丸い矢印は水色地に白字のまま残す */
.mk-ftr__btn svg{ fill:var(--mx-cy); stroke:var(--mx-cy); }