/* ==========================================================================
   ステップ14　── 書体をトビラ（rct.tobila.com）に合わせる
   2026-08-06 riho さん「フォントも同じようにして」

   出典  sites/_shared/tobila-typography.css（2026-08-06 実測）

   トビラは 3書体を はっきり使い分けている。

     日本語の本文・ラベル   YakuHanJP, "Noto Sans JP", sans-serif    42か所
     欧文・数字ぜんぶ       "Hanken Grotesk", sans-serif             37か所
     日本語の大見出しだけ   見出ゴMB31（モリサワ・有料）              8か所

   ★見出ゴMB31 は有料（TypeSquare 経由）なので そのままは使えません。
     出典ファイルにある代替案どおり Noto Sans JP の Bold を当てています。
     契約したら、--mk-font-display の1行を差し替えるだけで入ります。

   ★YakuHanJP は無料（MIT）。約物（、。「」（））のアキだけ詰める字形セットで、
     字そのものは Noto Sans JP が出します。CDN から読み込んでいます。

   字間と太さ（実測）
     和文 1.28px 固定（サイズが変わっても 1.28px のまま）
     欧文 0.03em
     太さは 400 / 500 / 600 / 700 の4段階だけ

   ★大きさ（フォントサイズ）は変えていません。
     いまの大きさは プライムナンバーズ の実測に合わせたもので、
     riho さんと決めてきた値です。トビラの大きさに揃えるかは別途ご相談ください。
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4/dist/css/yakuhanjp.css");

:root{
  --mk-font-ja:      YakuHanJP, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --mk-font-en:      "Hanken Grotesk", sans-serif;
  /* ★有料フォントの代わり。契約したら見出ゴMB31に差し替える */
  --mk-font-display: YakuHanJP, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --mk-ls-ja: 1.28px;
  --mk-ls-en: .03em;
}


/* --- 1. 日本語は全部 YakuHanJP ＋ Noto Sans JP ------------------------------ */
body,
.mk,
.mk-hdr,.mk-hdr *,
.mk-ftr,.mk-ftr *,
.mk-drawer,.mk-drawer *{font-family:var(--mk-font-ja);}


/* --- 2. 欧文・数字は Hanken Grotesk -----------------------------------------
   トビラは英語と数字を必ずこの書体にしている（和文と混ざる所は span で切替）。
   こちらで英語・数字だけの部品は次のとおり。 */
.mk .mk-sectitle__en,      /* ／ Service ／ Case study … */
.mk .t-en,                 /* Contact など大きい英語 */
.mk .t-deco-en,
.mk .mk-more__txt,         /* View all / Read more */
.mk .mk-numcard__no,       /* 01 02 03 */
.mk .mk-usecard__no,
.mk .mk-news__y,
.mk .mk-news__d,
.mk .mk-case__client,      /* 日付・年月 */
.mk .mk-pop__en,
.mk .mk-contact__side h1,  /* Contact */
.mk-ftr__legal span,       /* © の行 */
.mk .mk-stats b{
  font-family:var(--mk-font-en);
  letter-spacing:var(--mk-ls-en);
}


/* --- 3. 大見出しは display 用（いまは Noto Sans JP の Bold）------------------ */
.mk .mk-head h2,
.mk .mk-pagehead h1,
.mk .t-h1,.mk .t-h2,
.s-laboro .hero-h1{font-family:var(--mk-font-display);}


/* --- 4. 字間：和文は 1.28px 固定 -------------------------------------------
   これまでは .04em〜.1em（＝サイズに応じて伸びる指定）でした。
   トビラは大きさが変わっても 1.28px のままなので、そちらに合わせます。 */
.mk,
.mk .t-body,
.mk .mk-head .mk-lead,
.mk .mk-theme__text,
.mk .mk-theme__title,
.mk .mk-usecard__title,.mk .mk-usecard__text,
.mk .mk-numcard__title,.mk .mk-numcard__text,
.mk .mk-post__title,
.mk .mk-case__title,
.mk .mk-h-mid,
.mk .mk-pill,.mk .mk-pill--auto,
.mk .mk-table th,.mk .mk-table td,
.mk .c-spec th,.mk .c-spec td,
.mk .mk-article p,.mk .mk-article h3,
.mk .mk-form__label,
.mk-ftr__col > p,.mk-ftr__col li,
.mk-hdr__item{letter-spacing:var(--mk-ls-ja);}

/* 大見出しだけは少し広め（トビラの大見出しも 2.76px / 0.72px と広い） */
.mk .mk-head h2,
.mk .mk-pagehead h1,
.mk .t-h1,.mk .t-h2{letter-spacing:2.76px;}


/* --- 5. 太さは 400 / 500 / 600 / 700 の4段階だけ ---------------------------
   これまで w300（本文）を使っていましたが、トビラに w300 はありません。
   本文は 400 に上げます。 */
.mk{font-weight:400;}
.mk .t-body,
.mk .mk-head .mk-lead,
.mk .mk-theme__text,
.mk .mk-usecard__text,
.mk .mk-numcard__text,
.mk .mk-table td,
.mk .mk-article p,
.mk .mk-beforeafter li,
.mk .mk-theme__cases p,
.mk .mk-btn-card__desc,
.mk .mk-tag,
.mk-ftr__legal,
.mk-ftr__bnr p{font-weight:400;}


/* --- 6. 行間：本文まわりだけ 2.0（トビラは本文とフッターだけ 2.0）------------ */
.mk .t-body,
.mk .mk-head .mk-lead,
.mk .mk-article p{line-height:2;}
.mk-ftr__col li{line-height:28px;}