@charset "UTF-8";
/* ============================================================
   04. 独自コンポーネント
   このサイトにしかない部品。ショートコードから出力されます。
   ============================================================ */

/* ------------------------------------------------------------
   結論ブロック（記事冒頭の3行）
   ------------------------------------------------------------ */
.mh-conclusion {
  background: var(--mh-paper);
  border-left: 3px solid var(--mh-ink);
  padding: var(--mh-s5);
  margin: var(--mh-s6) 0;
}
.mh-conclusion__label {
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  letter-spacing: .16em;
  color: var(--mh-ink-3);
  display: block;
  margin-bottom: var(--mh-s3);
}
.mh-conclusion ul { margin: 0; padding-left: 1.2em; }
.mh-conclusion li { font-size: var(--mh-fs-300); line-height: 1.9; }

/* ------------------------------------------------------------
   3光源スワッチ（このサイトの中心部品）
   台紙は必ず18%グレー。周囲の明るさが変わると比較が成立しません。
   モバイルでも3列を崩さないのは、同時に並んで見えることが要件だからです。
   ------------------------------------------------------------ */
.mh-lightset {
  margin: var(--mh-s6) 0;
  background: var(--mh-mount);
  padding: var(--mh-s4);
  border-radius: var(--mh-radius);
}
.mh-lightset__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mh-s3);
}
.mh-lightset__item { margin: 0; }
.mh-lightset__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #8A8A8A;
  border-radius: 1px;
}
.mh-lightset__cap {
  margin-top: var(--mh-s2);
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  line-height: 1.5;
  letter-spacing: .04em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* 光源の色は、この5pxの点にしか使いません */
.mh-lightset__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.mh-lightset__item--natural  .mh-lightset__dot { background: var(--mh-k6500); }
.mh-lightset__item--daylight .mh-lightset__dot { background: var(--mh-k5000); }
.mh-lightset__item--bulb     .mh-lightset__dot { background: var(--mh-k2700); }
.mh-lightset__k { color: rgba(255,255,255,.72); }

.mh-lightset__note {
  margin-top: var(--mh-s3);
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  color: rgba(255,255,255,.72);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   HEXチップ
   ------------------------------------------------------------ */
.mh-hex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-200);
  letter-spacing: var(--mh-track-mono);
  white-space: nowrap;
}
.mh-hex__chip {
  width: 14px; height: 14px;
  border: 1px solid var(--mh-rule-strong);
  border-radius: 1px;
  flex: none;
}
.mh-hex__label { color: var(--mh-ink-3); font-size: var(--mh-fs-50); }

/* ------------------------------------------------------------
   色差ΔEバッジ
   数値と一緒に横棒で大きさを示す。0–12 を上限としたスケール。
   ------------------------------------------------------------ */
.mh-delta {
  display: block;
  border: var(--mh-border);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  padding: var(--mh-s4);
  margin: var(--mh-s5) 0;
}
.mh-delta__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-s3);
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-100);
  color: var(--mh-ink-3);
  letter-spacing: .06em;
}
.mh-delta__value {
  font-family: var(--mh-font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mh-ink);
  font-variant-numeric: tabular-nums;
}
.mh-delta__value small { font-size: var(--mh-fs-100); color: var(--mh-ink-3); margin-left: 2px; }
.mh-delta__track {
  margin-top: var(--mh-s3);
  height: 6px;
  background: var(--mh-surface-2);
  border-radius: 1px;
  overflow: hidden;
}
.mh-delta__bar { height: 100%; background: var(--mh-ink-3); }
.mh-delta__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  color: var(--mh-ink-3);
}
.mh-delta__note { margin-top: var(--mh-s3); font-size: var(--mh-fs-200); color: var(--mh-ink-2); }
/* 色差が大きいときだけ注意色を使う */
.mh-delta.is-high { border-color: var(--mh-signal); background: var(--mh-signal-soft); }
.mh-delta.is-high .mh-delta__bar { background: var(--mh-signal); }
.mh-delta.is-high .mh-delta__value { color: var(--mh-signal); }

/* ------------------------------------------------------------
   実測データ表
   ------------------------------------------------------------ */
.mh-spec {
  border: var(--mh-border);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  margin: var(--mh-s6) 0;
  overflow: hidden;
}
.mh-spec__caption {
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  letter-spacing: .14em;
  color: var(--mh-ink-3);
  padding: var(--mh-s3) var(--mh-s4);
  border-bottom: 1px solid var(--mh-rule);
  background: var(--mh-paper);
}
.mh-spec__list { margin: 0; }
.mh-spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--mh-s4);
  align-items: baseline;
  padding: var(--mh-s3) var(--mh-s4);
  border-bottom: 1px solid var(--mh-rule);
}
.mh-spec__row:last-child { border-bottom: none; }
.mh-spec__key {
  margin: 0;
  font-size: var(--mh-fs-200);
  color: var(--mh-ink-2);
}
.mh-spec__val {
  margin: 0;
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-300);
  font-variant-numeric: tabular-nums;
  color: var(--mh-ink);
  text-align: right;
}

/* 5段階評価を点で示す */
.mh-scale { display: inline-flex; gap: 3px; vertical-align: middle; }
.mh-scale i {
  width: 7px; height: 7px;
  border: 1px solid var(--mh-ink-3);
  border-radius: 50%;
}
.mh-scale i.is-on { background: var(--mh-ink); border-color: var(--mh-ink); }

/* ------------------------------------------------------------
   ストア／品番の比較表
   1列目を固定して横スクロール。ウェブトゥーンサイトでも同じ部品が使えます。
   ------------------------------------------------------------ */
.mh-compare {
  margin: var(--mh-s6) 0;
  border: var(--mh-border);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mh-compare table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--mh-fs-200);
}
.mh-compare th, .mh-compare td {
  padding: var(--mh-s3) var(--mh-s4);
  border-bottom: 1px solid var(--mh-rule);
  text-align: right;
  white-space: nowrap;
}
.mh-compare thead th {
  background: var(--mh-paper);
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--mh-ink-3);
}
.mh-compare tbody th {
  text-align: left;
  font-weight: 700;
  position: sticky;
  left: 0;
  background: var(--mh-surface);
}
.mh-compare td { font-family: var(--mh-font-mono); font-variant-numeric: tabular-nums; }
.mh-compare tr:last-child th, .mh-compare tr:last-child td { border-bottom: none; }
.mh-compare tr.is-best th,
.mh-compare tr.is-best td { background: var(--mh-accent-soft); color: var(--mh-ink); }
.mh-best-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--mh-radius);
  background: var(--mh-accent);
  color: #fff;
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  letter-spacing: .06em;
}

/* ------------------------------------------------------------
   誘導ボタン
   ------------------------------------------------------------ */
.mh-cta {
  display: block;
  margin: var(--mh-s6) 0;
  border: var(--mh-border);
  border-radius: var(--mh-radius);
  background: var(--mh-paper);
  padding: var(--mh-s5);
}
.mh-cta__lead { font-size: var(--mh-fs-300); color: var(--mh-ink-2); margin: 0 0 var(--mh-s4); }
.mh-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-s2);
  background: var(--mh-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--mh-fs-300);
  letter-spacing: .04em;
  padding: var(--mh-s3) var(--mh-s6);
  border-radius: var(--mh-radius);
  transition: background var(--mh-dur) var(--mh-ease);
}
.mh-cta__btn:hover { background: var(--mh-accent-hover); color: #fff; text-decoration: none; }
.mh-cta__note {
  margin: var(--mh-s3) 0 0;
  font-size: var(--mh-fs-100);
  color: var(--mh-ink-3);
}

/* PR表記（ステマ規制対応） */
.mh-pr {
  display: inline-block;
  border: 1px solid var(--mh-rule-strong);
  border-radius: var(--mh-radius);
  padding: 0 5px;
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  letter-spacing: .1em;
  color: var(--mh-ink-3);
}

/* ------------------------------------------------------------
   撮影条件の注記（E-E-A-Tの土台。全品番ページの末尾に置く）
   ------------------------------------------------------------ */
.mh-method {
  border-top: 1px solid var(--mh-rule);
  margin-top: var(--mh-s8);
  padding-top: var(--mh-s5);
  font-size: var(--mh-fs-200);
  color: var(--mh-ink-3);
  line-height: 1.9;
}
.mh-method__title {
  font-family: var(--mh-font-mono);
  font-size: var(--mh-fs-50);
  letter-spacing: .14em;
  color: var(--mh-ink-3);
  margin-bottom: var(--mh-s2);
}