@charset "UTF-8";
/* ============================================================
   01. デザイントークン
   ここの値を変えるとサイト全体の見た目が変わります。
   個別のCSSに色や数値を直書きしないでください。
   ============================================================ */

:root {

  /* --- 無彩色 ---------------------------------------------
     このサイトのUIは彩度を持ちません。
     色見本の隣に色を置くと同時対比で見本の色が違って見えるためです。 */
  --mh-ink:            #17181A;  /* 本文・見出し */
  --mh-ink-2:          #4A4C50;  /* 補助テキスト */
  --mh-ink-3:          #797B7F;  /* キャプション・メタ */
  --mh-paper:          #F2F2F1;  /* ページ背景 */
  --mh-surface:        #FFFFFF;  /* カード・記事本文の面 */
  --mh-surface-2:      #E9E9E8;  /* タグ・入力欄の面 */
  --mh-mount:          #7B7B7B;  /* 18%グレー。見本を載せる台紙の色 */
  --mh-rule:           #DCDCDB;  /* 罫線 */
  --mh-rule-strong:    #B7B7B6;  /* 強い罫線 */

  /* --- 差し色 ---------------------------------------------
     カラーチェッカーのBlueパッチに由来。
     内装材に出にくい寒色なので、見本の色と混同されません。
     使うのはリンク・ボタン・最安表示だけに限定します。 */
  --mh-accent:         #383D96;
  --mh-accent-hover:   #2A2E78;
  --mh-accent-soft:    #ECEEF7;

  /* --- 注意色 ---------------------------------------------
     色差が大きいことを示すときだけに使います。 */
  --mh-signal:         #A9581F;
  --mh-signal-soft:    #F7F0E9;

  /* --- 光源 -----------------------------------------------
     3光源ラベルの小さな点にだけ使う色。面積を広げないこと。 */
  --mh-k6500:          #C9D8E6;  /* 自然光 6500K */
  --mh-k5000:          #E8E8E4;  /* 昼白色 5000K */
  --mh-k2700:          #EFD9AE;  /* 電球色 2700K */

  /* --- 書体 -----------------------------------------------
     見出し＝明朝（見本帳の表紙の質感）
     本文  ＝角ゴシック（読みやすさ）
     数値  ＝等幅（品番・HEX・ΔE・K は「コード」なので等幅で組む） */
  --mh-font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mh-font-body:    "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                     "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --mh-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- 文字サイズ（1.20 スケール） --------------------------- */
  --mh-fs-50:   0.6875rem;  /* 11px  ラベル */
  --mh-fs-100:  0.75rem;    /* 12px  キャプション */
  --mh-fs-200:  0.8125rem;  /* 13px  メタ */
  --mh-fs-300:  0.9375rem;  /* 15px  小さい本文 */
  --mh-fs-400:  1rem;       /* 16px  本文 */
  --mh-fs-500:  1.125rem;   /* 18px  リード */
  --mh-fs-600:  1.375rem;   /* 22px  h3 */
  --mh-fs-700:  1.625rem;   /* 26px  h2 */
  --mh-fs-800:  2rem;       /* 32px  記事タイトル */
  --mh-fs-900:  2.625rem;   /* 42px  ページ見出し */

  --mh-lh-tight: 1.35;
  --mh-lh-body:  1.9;   /* 日本語は行間を広めに */
  --mh-track-jp: 0.02em;
  --mh-track-mono: 0.04em;

  /* --- 余白（4pxグリッド） --------------------------------- */
  --mh-s1:  4px;
  --mh-s2:  8px;
  --mh-s3:  12px;
  --mh-s4:  16px;
  --mh-s5:  24px;
  --mh-s6:  32px;
  --mh-s7:  48px;
  --mh-s8:  64px;
  --mh-s9:  96px;

  /* --- 形 -------------------------------------------------
     角丸はほぼ無し。カタログや検査票の精度感を優先します。 */
  --mh-radius:     2px;
  --mh-radius-lg:  4px;
  --mh-border:     1px solid var(--mh-rule);

  --mh-shadow-1: 0 1px 2px rgba(23,24,26,.05);
  --mh-shadow-2: 0 4px 16px rgba(23,24,26,.10);

  /* --- 寸法 ----------------------------------------------- */
  --mh-content-w: 1180px;
  --mh-main-w:    760px;
  --mh-side-w:    308px;
  --mh-gutter:    24px;

  --mh-ease: cubic-bezier(.2,.6,.2,1);
  --mh-dur:  .18s;

  /* --- シグネチャ -------------------------------------------
     6段のグレースケール・ウェッジ。
     カラーチェッカー最下段の無彩色列がそのまま罫線になっています。
     「このサイトの色はすべて基準に対して測られている」という宣言です。 */
  --mh-wedge: linear-gradient(90deg,
      #FFFFFF 0 16.6667%,
      #D8D8D8 0 33.3333%,
      #AFAFAF 0 50%,
      #868686 0 66.6667%,
      #5A5A5A 0 83.3333%,
      #1A1A1A 0 100%);
}

/* ダークモードは意図的に用意していません。
   背景が暗いと色見本の明度判断が狂い、このサイトの目的と矛盾するためです。 */