@charset "UTF-8";
/* ============================================================
   05. ユーティリティ
   追記が必要になったらこのファイルの末尾に足してください。
   ============================================================ */

.mh-mt-0 { margin-top: 0 !important; }
.mh-mt-4 { margin-top: var(--mh-s5) !important; }
.mh-mt-6 { margin-top: var(--mh-s7) !important; }
.mh-mb-0 { margin-bottom: 0 !important; }

.mh-muted   { color: var(--mh-ink-3); }
.mh-small   { font-size: var(--mh-fs-200); }
.mh-mono    { font-family: var(--mh-font-mono); font-variant-numeric: tabular-nums; }
.mh-center  { text-align: center; }

/* 2〜3カラムの並列。品番の横並び比較などに */
.mh-cols-2, .mh-cols-3 { display: grid; gap: var(--mh-s4); }
.mh-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mh-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* 台紙。任意の画像を18%グレーに載せたいとき */
.mh-mount {
  background: var(--mh-mount);
  padding: var(--mh-s4);
  border-radius: var(--mh-radius);
}

/* 画面外に置くが読み上げには残す */
.mh-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}