@charset "utf-8";
/* ============================================================
   icd-feature.css
   記事の中に置く「見せ場」の見た目。
   ARTICLES.json の figs に html を書いて差し込む。

   ※このサイトは html { font-size: 62.5% } なので 1rem = 10px。
   ※クラスはすべて .fx- で始める。ほかのページに漏らさないため。
   ============================================================ */

.fx {
  --fx-ink: #10180f;
  --fx-deep: #14201a;      /* 濃い地。ヒーローの動画の地色と揃える */
  --fx-paper: #f4f6ef;
  --fx-leaf: #3d6b4a;
  --fx-brass: #a98f5c;
  --fx-brass-lt: #d9c39a;
  --fx-rule: rgba(255, 255, 255, .16);
  --fx-label: 1.22rem;

  position: relative;
  margin: 54px 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--fx-deep);
  color: #fff;
}

/* 本文の幅からはみ出して、記事の中で「面」を作る */
@media screen and (min-width: 880px) {
  .fx--wide { margin-left: -46px; margin-right: -46px; }
}

.fx__head {
  padding: 34px 34px 0;
}
.fx__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fx-label);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fx-brass-lt);
  margin: 0 0 14px;
}
.fx__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fx-rule);
}
.fx h3.fx__title,
.fx .fx__title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.32rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  text-wrap: balance;
}
.fx__lead {
  font-size: 1.45rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .84);
  margin: 0;
  max-width: 46em;
}
.fx__body { padding: 26px 34px 34px; }

/* ------------------------------------------------------------
   出るときだけ動かす。JSが動かなければ js-fx が付かないので、
   最初から見えている。7つの見せ場で使っている共通のフック。
   ------------------------------------------------------------ */
.js-fx .fx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js-fx .fx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-fx .fx-reveal { opacity: 1; transform: none; transition: none; }
}

.fx__note {
  font-size: 1.24rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .58);
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--fx-rule);
}
.fx__note a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 3px; }
/* 明るい地の見せ場では、上の白いリンクだと読めない（地に対して1.30）。
   その3つだけ、地に合う濃さに戻す。 */
.fx.fx-lb .fx__note a { color: var(--lb-ink); }
.fx.fx-ru .fx__note a { color: var(--ru-ink); }
.fx.fx-fm .fx__note a { color: var(--fm-ink); }

/* ------------------------------------------------------------
   本文の指定に負けないようにする。
   .ic-article p { color:#3a463d } のほうが詳細度が高く、
   濃い地の上に濃い文字が出てしまっていた。
   ------------------------------------------------------------ */
.ic-article .fx p,
.ic-article .fx li,
.ic-article .fx dd,
.ic-article .fx td,
.ic-article .fx th { color: rgba(255, 255, 255, .84); }
.ic-article .fx .fx__lead { font-size: 1.52rem; line-height: 1.95; margin: 0; }
.ic-article .fx .fx__note { font-size: 1.24rem; line-height: 1.8; color: rgba(255, 255, 255, .58); margin: 20px 0 0; }
.ic-article .fx .fx__eyebrow { font-size: var(--fx-label); line-height: 1.6; color: var(--fx-brass-lt); margin: 0 0 14px; }
.ic-article .fx strong { color: #fff; }
.ic-article .fx a { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------------
   見せ場③　値段はどこにかたまっているか
   製品を1行ずつ、値段の順に並べる。点の左右の位置が値段。
   安いほうに寄っているので目盛りは対数。
   名前が長いので、点の上に名前を重ねずに、左の欄に置く。
   ------------------------------------------------------------ */
.fx-pr__chart {
  margin-top: 24px;
  border-top: 1px solid var(--fx-rule);
}

.fx-pr__head,
.ic-article .fx .fx-pr__row,
.fx-pr__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(110px, 1.5fr) 7.4em;
  align-items: center;
  gap: 0 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 目盛りの行 */
.fx-pr__head { padding: 12px 0 6px; }
.fx-pr__ticks {
  position: relative;
  grid-column: 2;
  height: 15px;
  margin: 0 6px;
}
.fx-pr__tick {
  position: absolute;
  top: 0;
  left: var(--x);
  transform: translateX(-50%);
  font-size: 1.1rem;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, .48);
  font-variant-numeric: tabular-nums;
}
.fx-pr__tick:first-child { transform: none; }
.fx-pr__tick:last-child { transform: translateX(-100%); }

.ic-article .fx ol.fx-pr__rows,
.fx-pr__rows { list-style: none; margin: 0; padding: 0; }

.ic-article .fx .fx-pr__row,
.fx-pr__row {
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ic-article .fx .fx-pr__nm,
.fx-pr__nm {
  font-size: 1.28rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .8);
  text-align: right;
  min-width: 0;
}

.fx-pr__track {
  position: relative;
  height: 20px;
  margin: 0 6px;
}
.fx-pr__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
.fx-pr__dot {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--fx-brass-lt);
  box-shadow: 0 0 0 3px rgba(20, 32, 26, .9);
}

.ic-article .fx .fx-pr__val,
.fx-pr__val {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.52rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  width: 100%;
}
.ic-article .fx .fx-pr__val small,
.fx-pr__val small { font-size: 1.14rem; margin-left: 2px; opacity: .7; }

/* いちばん多く選ばれる1本だけ、金で立てる */
.ic-article .fx .fx-pr__row.is-hero,
.fx-pr__row.is-hero { background: rgba(169, 143, 92, .12); }
.ic-article .fx .fx-pr__row.is-hero .fx-pr__nm,
.ic-article .fx .fx-pr__row.is-hero .fx-pr__val { color: #fff; }
.fx-pr__row.is-hero .fx-pr__dot {
  width: 13px; height: 13px;
  margin-top: -6.5px; margin-left: -6.5px;
  background: var(--fx-brass);
  box-shadow: 0 0 0 3px rgba(20, 32, 26, .9), 0 0 0 6px rgba(169, 143, 92, .3);
}

/* 値段が寄っているところに、うすい帯を敷く */
.fx-pr__band {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  background: rgba(217, 195, 154, .07);
  border-left: 1px solid rgba(217, 195, 154, .16);
  border-right: 1px solid rgba(217, 195, 154, .16);
  pointer-events: none;
}
.fx-pr__bandwrap { position: relative; }
.fx-pr__bandgrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(110px, 1.5fr) 7.4em;
  gap: 0 14px;
  pointer-events: none;
}
.fx-pr__bandcol { position: relative; grid-column: 2; margin: 0 6px; }
@media screen and (max-width: 660px) {
  .fx-pr__bandgrid { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-pr__bandcol { grid-column: 1 / -1; }
}

.ic-article .fx .fx-pr__hero {
  font-size: 1.34rem;
  line-height: 1.9;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .86);
}
.ic-article .fx .fx-pr__hero strong { color: var(--fx-brass-lt); }

@media screen and (max-width: 660px) {
  /* 名前と値段を1行目に、点の帯を2行目に置く */
  .fx-pr__head,
  .ic-article .fx .fx-pr__row,
  .fx-pr__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nm val" "trk trk";
    gap: 2px 10px;
  }
  .ic-article .fx .fx-pr__nm,
  .fx-pr__nm { grid-area: nm; text-align: left; }
  .ic-article .fx .fx-pr__val,
  .fx-pr__val { grid-area: val; }
  .fx-pr__ticks { grid-area: trk; }
  .fx-pr__track { grid-area: trk; height: 16px; }
  /* 狭い画面では目盛りが11〜12px重なって読めないので、1つおきに落とす */
  .ic-article .fx .fx-pr__tick:nth-child(2n),
  .fx .fx-pr__tick:nth-child(2n) { display: none; }
}


/* ============================================================
   fx-ev ／ 証拠カード
   「本当にそう書いてあるのか」を、画面のキャプチャとリンクで見せる。
   引用は原文のまま。訳は下に小さく置く。
   ============================================================ */

.fx-ev { background: var(--fx-deep); }

/* 枚数ごとに、穴が空かない列数にする */
@media screen and (min-width: 880px) {
  .fx-ev__grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-ev__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-ev__grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fx-ev__grid {
  display: grid;
  /* auto-fit だと 952px で2列になり、カードが3枚のとき右下に
     475×522 の穴が空いていた。枚数で列を決める。 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 286px), 1fr));
  gap: 1px;
  background: var(--fx-rule);
  border-top: 1px solid var(--fx-rule);
  margin-top: 26px;
}

.fx-ev__card {
  display: flex;
  flex-direction: column;
  background: var(--fx-deep);
  padding: 0;
  min-width: 0;
}

/* キャプチャ。紙の色の台に乗せて、原簿らしく見せる */
.fx-ev__shot {
  display: block;
  position: relative;
  margin: 0;
  padding: 18px 18px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
  text-decoration: none;
  overflow: hidden;
}
.fx-ev__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 420;
  object-fit: cover;
  object-position: top left;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  transform: translateY(0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.fx-ev__shot::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(20, 32, 26, 0), rgba(20, 32, 26, .92));
  pointer-events: none;
}
.fx-ev__open {
  position: absolute;
  right: 26px;
  bottom: 10px;
  z-index: 2;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--fx-brass-lt);
  background: rgba(20, 32, 26, .82);
  border: 1px solid rgba(217, 195, 154, .4);
  border-radius: 999px;
  padding: 4px 12px;
  transition: background .3s, color .3s;
}
.fx-ev__card:hover .fx-ev__shot img,
.fx-ev__card:focus-within .fx-ev__shot img { transform: translateY(-10px); }
.fx-ev__card:hover .fx-ev__open,
.fx-ev__card:focus-within .fx-ev__open { background: var(--fx-brass); color: #14201a; }

.fx-ev__body {
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ic-article .fx .fx-ev__src {
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--fx-brass-lt);
  margin: 0;
}
.ic-article .fx h4.fx-ev__what,
.fx-ev__what {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.72rem;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

/* 原文。引用であることが形でわかるように、左に真鍮の罫を引く */
.ic-article .fx .fx-ev__quote {
  font-size: 1.34rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .8);
  margin: 2px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--fx-brass);
  word-break: break-word;
}
.ic-article .fx .fx-ev__tr {
  font-size: 1.42rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .56);
  margin: 0;
  padding-left: 15px;
}

.ic-article .fx a.fx-ev__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fx-brass-lt);
  text-decoration: none;
  border-top: 1px solid var(--fx-rule);
  word-break: break-all;
}
.ic-article .fx a.fx-ev__link:hover { color: #fff; text-decoration: underline; }
.fx-ev__link i { font-style: normal; opacity: .7; }

/* キャプチャが用意できていないものは、文字だけのカードにする */
.fx-ev__card--text .fx-ev__body { padding-top: 24px; }

@media screen and (max-width: 700px) {
  .fx-ev__body { padding: 16px 18px 20px; }
}

/* ------------------------------------------------------------
   fx-ev--plate ／ 証拠を1枚だけ大きく見せる版
   引用が長いもの、原文そのものを読ませたいものに使う。
   ------------------------------------------------------------ */

.fx-ev__plate {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--fx-rule);
}
@media screen and (min-width: 900px) {
  .fx-ev__plate {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  }
  .fx-ev__plate > * + * { border-left: 1px solid var(--fx-rule); }
}

/* 左：キャプチャ。紙をそのまま置いたように見せる */
.fx-ev__plateshot {
  display: block;
  position: relative;
  padding: 26px 26px 26px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%);
  text-decoration: none;
  min-width: 0;
}
.fx-ev__plateshot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 3px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s;
}
.fx-ev__plateshot:hover img,
.fx-ev__platelink:focus-visible img {
  transform: translateY(-6px);
  box-shadow: 0 26px 58px rgba(0, 0, 0, .5);
}
.ic-article .fx .fx-ev__cap {
  font-size: 1.16rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .52);
  margin: 12px 0 0;
  text-align: center;
}
.ic-article .fx .fx-ev__cap a { color: var(--fx-brass-lt); text-decoration: none; }
.ic-article .fx .fx-ev__cap a:hover { text-decoration: underline; }

/* 右：そこに何が書いてあるかの読み解き */
.fx-ev__read {
  padding: 26px 30px 30px;
  min-width: 0;
}
.ic-article .fx ul.fx-ev__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ic-article .fx .fx-ev__list > li {
  position: relative;
  padding-left: 20px;
  font-size: 1.4rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .86);
}
.ic-article .fx .fx-ev__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 10px;
  height: 1px;
  background: var(--fx-brass);
}
.ic-article .fx .fx-ev__list b {
  display: block;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ic-article .fx .fx-ev__list em {
  display: block;
  font-style: normal;
  font-size: 1.34rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
  margin-top: 3px;
  padding-left: 11px;
  border-left: 2px solid var(--fx-brass);
  word-break: break-word;
}

/* 下段：補強の一枚（横長） */
.fx-ev__strip {
  border-top: 1px solid var(--fx-rule);
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 22px 30px 26px;
}
@media screen and (min-width: 760px) {
  .fx-ev__strip { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
.fx-ev__strip img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 3px;
}
.ic-article .fx .fx-ev__strip p {
  font-size: 1.3rem;
  line-height: 1.85;
  margin: 0;
  color: rgba(255, 255, 255, .8);
}

/* 記事の a の色と下線が、キャプチャのリンクに乗らないようにする */
.ic-article .fx a.fx-ev__shot,
.ic-article .fx a.fx-ev__plateshot,
.ic-article .fx .fx-ev__strip a {
  text-decoration: none;
  font-weight: 400;
  color: inherit;
}

.ic-article .fx a.fx-ev__platelink,
.fx-ev__platelink { display: block; text-decoration: none; color: inherit; font-weight: 400; }


/* ------------------------------------------------------------
   最高品質① どこまで広がったか —— ソウルからの方角と距離
   ------------------------------------------------------------ */
.fx-w {
  position: relative;
  isolation: isolate;
  border-radius: 4px;
  background: #16241c;
  background: radial-gradient(128% 148% at 26% -14%, #2c4737 0%, #14201a 60%);
  overflow: hidden;
}
.fx-w__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 44% at 50% 52%, rgba(169, 143, 92, .18), transparent 66%),
    radial-gradient(120% 90% at 84% 100%, rgba(56, 178, 161, .08), transparent 60%);
}
.fx-w__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(6px, 1.6vw, 26px);
  align-items: center;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 38px);
}

/* --- 図 --- */
.fx-w__stage { position: relative; justify-self: center; width: 100%; max-width: 540px; min-width: 0; }
.fx-w__svg { width: 100%; height: auto; display: block; overflow: visible; }

.fx-w-ring { fill: none; stroke: rgba(240, 235, 220, .17); stroke-width: 1; stroke-dasharray: 2 6; }
.fx-w-ringlbl { fill: rgba(244, 240, 228, .74); font-family: 'Noto Sans JP', sans-serif; font-size: 11px; letter-spacing: .1em; }
.fx-w-spoke { stroke: rgba(240, 235, 220, .07); stroke-width: 1; }

.fx-w-arc {
  fill: none;
  stroke: rgba(240, 215, 156, .30);
  stroke-width: 1.2;
  stroke-linecap: round;
  transition: stroke .5s ease, stroke-width .5s ease;
}
.fx-w-node.is-lit .fx-w-arc { stroke: #e9cd90; stroke-width: 2.1; }
.fx-w-node.is-dim .fx-w-arc { stroke: rgba(240, 215, 156, .12); }

.fx-w-dot { fill: rgba(240, 215, 156, .42); transition: fill .4s ease, r .4s ease; }
.fx-w-halo { fill: none; stroke: #f3dca6; stroke-width: 1.6; opacity: 0; transform-origin: center; transform-box: fill-box; }
.fx-w-node.is-lit .fx-w-dot { fill: #f0d79c; r: 5.4; }
.fx-w-node.is-lit .fx-w-halo { opacity: 1; animation: fxwPulse 2.2s ease-out infinite; }
.fx-w-node.is-dim .fx-w-dot { fill: rgba(240, 215, 156, .16); }
.fx-w-node--home .fx-w-dot { fill: #fff; r: 5.6; }
@keyframes fxwPulse { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(2.4); opacity: 0; } }

.fx-w-tag { opacity: 0; transform: scale(.7); transform-box: fill-box; transform-origin: center bottom;
  transition: opacity .3s ease, transform .34s cubic-bezier(.2, 1.5, .4, 1); pointer-events: none; }
.fx-w-node.show-tag .fx-w-tag { opacity: 1; transform: scale(1); }
.fx-w-tagbg { fill: rgba(20, 32, 26, .95); stroke: #e9cd90; stroke-width: .9; }
.fx-w-tagtx { fill: #f3dca6; font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 11px; text-anchor: middle; letter-spacing: .04em; }
.fx-w-tagkm { fill: rgba(243, 220, 166, .72); font-family: 'Noto Sans JP', sans-serif; font-size: 8.5px; text-anchor: middle; letter-spacing: .06em; }
.fx-w-homelbl { fill: #fff; font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 12px; text-anchor: middle; letter-spacing: .1em; }

/* --- 文字 --- */
.fx-w__copy { display: flex; flex-direction: column; gap: clamp(9px, 1.4vw, 14px); min-width: 0; }
.ic-article .fx .fx-w__eyebrow,
.fx-w__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.fx-w__eb-en { font-size: 1.15rem; font-weight: 700; letter-spacing: .3em; color: #e6cf9a; }
.fx-w__eb-jp { position: relative; font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 1.44rem; letter-spacing: .14em; color: #e7ece2; padding-left: 16px; }
.fx-w__eb-jp::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; background: #e9cd90; border-radius: 0 60% 60% 60%; transform: translateY(-50%) rotate(45deg); }

.ic-article .fx h3.fx-w__title,
.fx-w__title {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(2.3rem, 3.5vw, 3.2rem);
  line-height: 1.45;
  letter-spacing: .015em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
.fx-w__em { font-style: normal; color: #f0d79c; position: relative; white-space: nowrap; }
.fx-w__em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 2px;
  background: linear-gradient(90deg, transparent, #a98f5c 20%, #f0d79c 80%, transparent); }

.ic-article .fx .fx-w__body,
.fx-w__body { font-size: clamp(1.42rem, 2.2vw, 1.56rem); line-height: 1.95; color: #dfe6da; margin: 0; max-width: 30em; }
.fx-w__mark { font-weight: 700; color: #fff; box-shadow: inset 0 -.5em 0 rgba(169, 143, 92, .34); }

.fx-w__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.ic-article .fx .fx-w__chips > li { margin: 0; padding: 0; }
.fx-w__chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid rgba(240, 215, 156, .42);
  background: rgba(240, 215, 156, .06);
  color: #eef1e9;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.4rem; letter-spacing: .02em; cursor: pointer;
  transition: background .28s, color .28s, border-color .28s, transform .18s, box-shadow .28s;
}
.fx-w__chip .fx-w__cn { font-family: 'Noto Sans JP', sans-serif; font-size: 1.08rem; font-weight: 800; letter-spacing: .1em; color: #f0d79c; transition: color .28s; }
.fx-w__chip:hover { transform: translateY(-2px); border-color: rgba(240, 215, 156, .8); }
.fx-w__chip:focus-visible { outline: 2px solid #f0d79c; outline-offset: 3px; }
.fx-w__chip.is-hot { background: linear-gradient(135deg, #c8a86a, #ecd196); color: #16241c; border-color: transparent; box-shadow: 0 8px 20px rgba(0, 0, 0, .26); }
.fx-w__chip.is-hot .fx-w__cn { color: #16241c; }

.ic-article .fx .fx-w__cap,
.fx-w__cap {
  min-height: 5.4em;
  font-size: clamp(1.34rem, 2.1vw, 1.46rem);
  line-height: 1.85; color: #d7ddd0;
  padding-left: 14px; border-left: 2px solid rgba(240, 215, 156, .35);
  margin: 2px 0 0;
  transition: opacity .28s ease;
}
.fx-w__cap.is-swap { opacity: 0; }
.fx-w__cap b { color: #f0d79c; font-weight: 700; }

.ic-article .fx .fx-w__note,
.fx-w__note { font-size: 1.22rem; line-height: 1.8; color: rgba(255, 255, 255, .5); margin: 6px 0 0; }

@media screen and (prefers-reduced-motion: reduce) {
  .fx-w-node.is-lit .fx-w-halo { animation: none; }
  .fx-w-arc, .fx-w-dot, .fx-w-tag { transition: none; }
}
@media screen and (max-width: 860px) {
  .fx-w__in { grid-template-columns: 1fr; gap: 22px; padding: 24px 18px 26px; }
  .fx-w__stage { max-width: 420px; }
  .fx-w__cap { min-height: 6.6em; }
}

/* ============================================================
   fx-lb —— 「箱の裏を、そのまま起こしてみる」
   札を並べるのではなく、印刷されている続き文をそのまま組む。
   店頭で箱をひっくり返したときと同じ並びにして、
   1番目と「水」の位置だけ、その場に印をつける。
   紙は箱の面。fx-ru の温かい紙、fx-fm の冷たい図面紙とは別の質感。
   ※ 1rem = 10px
   ============================================================ */
.fx.fx-lb {
  --lb-board: #e6e2d6;   /* 箱を置いてある面 */
  --lb-card: #faf8f2;    /* 箱の紙 */
  --lb-ink: #2b2a24;
  --lb-mute: #7a776c;
  --lb-rule: #cfc9b8;
  --lb-green: #2f6b45;
  --lb-water: #56707f;

  background: var(--lb-board);
  color: var(--lb-ink);
  box-shadow: inset 0 0 0 1px rgba(43, 42, 36, .10);
}
.fx.fx-lb .fx__eyebrow { color: #8a7644; }
.fx.fx-lb .fx__eyebrow::after { background: rgba(43, 42, 36, .18); }
.fx.fx-lb .fx__title { color: var(--lb-ink); }
.fx.fx-lb .fx__lead { color: #45443b; }
.fx.fx-lb .fx__note { color: var(--lb-mute); border-top-color: rgba(43, 42, 36, .16); }
.ic-article .fx.fx-lb p,
.ic-article .fx.fx-lb li { color: #45443b; }
.ic-article .fx.fx-lb .fx__lead { color: #45443b; }
.ic-article .fx.fx-lb .fx__note { color: var(--lb-mute); }
.ic-article .fx.fx-lb .fx__eyebrow { color: #8a7644; }
.ic-article .fx.fx-lb strong { color: var(--lb-ink); }

.fx-lb__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  /* 3枚は同じ高さの箱として並べる。中身の量が違っても、
     下の帯（1番目と水の位置）の高さがそろっていないと札の列に見える。 */
  align-items: stretch;
}

/* 箱の面 */
.fx.fx-lb .fx-lb__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--lb-card);
  border: 1px solid var(--lb-rule);
  border-radius: 2px;
  /* 紙の厚み。影を強く出すと箱に見えなくなるので、ごく浅く。 */
  box-shadow: 0 1px 0 rgba(43, 42, 36, .10), 0 6px 14px rgba(43, 42, 36, .07);
  overflow: hidden;
}
.fx.fx-lb .fx-lb__cap {
  padding: 13px 15px 11px;
  border-bottom: 1px solid var(--lb-rule);
  background: rgba(255, 255, 255, .5);
}
.fx-lb__nm {
  display: block;
  font-size: 1.36rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lb-ink);
  letter-spacing: .01em;
}
.fx-lb__vol {
  display: block;
  margin-top: 2px;
  font-size: 1.1rem;
  color: var(--lb-mute);
}

/* 表示そのもの */
.fx-lb__panel { position: relative; flex: 1 1 auto; padding: 15px 15px 13px; }
.fx-lb__tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 2px 7px;
  border: 1px solid var(--lb-ink);
  border-radius: 1px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;   /* 字送りの分、右に寄るのを戻す */
  line-height: 1.5;
}
.fx.fx-lb .fx-lb__text {
  margin: 0;
  /* 箱の裏の細かい字。行間だけは読めるように広めに取る。 */
  font-size: 1.18rem;
  line-height: 2.15;
  letter-spacing: .01em;
  color: #35342d;
  word-break: normal;
  overflow-wrap: anywhere;
}
.fx-lb__w { position: relative; white-space: nowrap; }
.fx-lb__sep { color: var(--lb-mute); }
.fx-lb__more { color: var(--lb-mute); }

/* 何番目かを、語の右肩に小さく打つ */
.fx-lb__no {
  font-style: normal;
  font-size: .74em;
  line-height: 1;
  vertical-align: .62em;
  margin-right: 1px;
  color: #6b6a5e;
  font-variant-numeric: tabular-nums;
}

/* 1番目。ここだけ濃く、下に線を引く */
.fx-lb__w.is-first {
  color: var(--lb-green);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(47, 107, 69, .26);
}
.fx-lb__w.is-first .fx-lb__no { color: var(--lb-green); }

/* 「水」。囲って、探しているものがどこにあるか分かるようにする */
.fx-lb__w.is-water {
  color: var(--lb-water);
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid rgba(86, 112, 127, .55);
  border-radius: 2px;
}
.fx-lb__w.is-water .fx-lb__no { color: var(--lb-water); }

/* 下の帯 */
.fx.fx-lb .fx-lb__foot {
  flex: 0 0 auto;
  /* どの箱も札は2つ。縦に積んで、3枚の破線の高さをそろえる。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 11px 15px 13px;
  border-top: 1px dashed var(--lb-rule);
  background: rgba(255, 255, 255, .42);
}
.fx-lb__badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
}
.fx-lb__badge.is-first { background: rgba(47, 107, 69, .12); color: var(--lb-green); }
.fx-lb__badge.is-water { background: rgba(86, 112, 127, .13); color: var(--lb-water); }
.fx-lb__badge.is-none { background: rgba(43, 42, 36, .07); color: var(--lb-mute); }

/* 読み取れること */
.fx.fx-lb .fx-lb__read {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid #8a7644;
  background: rgba(255, 255, 255, .62);
  font-size: 1.4rem;
  line-height: 1.9;
}
.fx.fx-lb .fx-lb__key {
  display: block;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #8a7644;
  margin-bottom: 4px;
}

@media screen and (max-width: 900px) {
  .fx-lb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 620px) {
  .fx-lb__grid { grid-template-columns: 1fr; gap: 14px; }
  .fx.fx-lb .fx-lb__text { font-size: 1.24rem; line-height: 2.2; }
}

/* ============================================================
   fx-ru —— 「同じ1mLの値段にすると」
   ほかの見せ場は濃い地に金の線だが、ここは机に置いた計量器にする。
   紙の地・黒鉛の目盛り・ガラスの管。色がついているのは中身だけ。
   管の長さ＝公表されている内容量。並び順＝1mLあたりの値段の安い順。
   ※ 1rem = 10px
   ============================================================ */
.fx.fx-ru {
  --ru-ink: #23281f;
  --ru-mute: #696f63;    /* 紙に対して 4.57:1。#6f7568 は 4.19:1 で足りなかった */
  --ru-line: #c8ccbe;
  --ru-paper: #f2f1e9;
  --ru-brass: #846a37;   /* 4.52:1 */
  --ru-name: 25rem;
  --ru-num: 11rem;

  background: var(--ru-paper);
  color: var(--ru-ink);
  /* 紙の縁。箱に見せず、板に見せる */
  box-shadow: inset 0 0 0 1px rgba(35, 40, 31, .10);
}
/* 濃い地むけに書いた共通の指定を、この一枚だけ紙用に置き換える */
.fx.fx-ru .fx__eyebrow { color: var(--ru-brass); }
.fx.fx-ru .fx__eyebrow::after { background: var(--ru-line); }
.fx.fx-ru .fx__title { color: var(--ru-ink); }
.fx.fx-ru .fx__lead { color: #444b3f; }
.fx.fx-ru .fx__note { color: var(--ru-mute); border-top-color: var(--ru-line); }
.ic-article .fx.fx-ru p,
.ic-article .fx.fx-ru li,
.ic-article .fx.fx-ru dd { color: #444b3f; }
.ic-article .fx.fx-ru .fx__lead { color: #444b3f; }
.ic-article .fx.fx-ru .fx__note { color: var(--ru-mute); }
.ic-article .fx.fx-ru .fx__eyebrow { color: var(--ru-brass); }
.ic-article .fx.fx-ru strong { color: var(--ru-ink); }
.ic-article .fx.fx-ru a { color: #2f564a; }

.fx-ru__wrap { position: relative; }
.fx-ru__wrap--g { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--ru-line); }

/* ---- 彫った目盛り ---- */
/* 目盛りの帯は、下の行とまったく同じ3列に載せる。位置をpxで合わせない。 */
.fx-ru__rulerow {
  display: grid;
  grid-template-columns: var(--ru-name) 1fr var(--ru-num);
  gap: 0 18px;
  align-items: end;
}
.fx.fx-ru .fx-ru__rule {
  position: relative;
  height: 30px;
  margin: 0;
  border-bottom: 1px solid var(--ru-ink);
}
.fx-ru__tk {
  position: absolute;
  bottom: 0;
  left: var(--p);
  width: 1px;
  height: 5px;
  background: rgba(35, 40, 31, .42);
}
.fx-ru__tk.is-big { height: 11px; background: var(--ru-ink); }
.fx-ru__tk > i {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 1.16rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ru-mute);
  font-variant-numeric: tabular-nums;
}
.fx-ru__tk:last-of-type > i { transform: translateX(-100%); }
/* 単位は右端の数字にくっつける（別置きにすると数字と重なる） */
.fx-ru__tk > i > em {
  font-style: normal;
  font-size: .92em;
  letter-spacing: .04em;
  color: var(--ru-brass);
  margin-left: 2px;
}

/* ---- 一覧 ---- */
.fx.fx-ru .fx-ru__list { list-style: none; margin: 0; padding: 0; border: 0; }
.fx.fx-ru .fx-ru__it {
  display: grid;
  grid-template-columns: var(--ru-name) 1fr var(--ru-num);
  align-items: center;
  gap: 0 18px;
  padding: 9px 0;
  margin: 0;
  border-bottom: 1px solid rgba(35, 40, 31, .09);
}
.fx.fx-ru .fx-ru__it::before,
.fx.fx-ru .fx-ru__it::marker { content: none; }
.fx.fx-ru .fx-ru__it:last-child { border-bottom: 0; }

.fx.fx-ru .fx-ru__nm {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ru-ink);
  text-align: right;
  letter-spacing: .01em;
}
.fx.fx-ru .fx-ru__v2 { display: none; }
.fx.fx-ru .fx-ru__sub {
  display: block;
  font-size: 1.1rem;
  color: var(--ru-mute);
  margin-top: 2px;
}

/* ---- ガラスの管 ---- */
.fx-ru__track {
  position: relative;
  height: 26px;
  /* 上の目盛りの延長。行をまたいで、うっすら下まで引く */
  /* 上の目盛りの延長。--ticks は目盛りの数（その段の上限 ÷ 10）。 */
  background: repeating-linear-gradient(90deg,
    rgba(35, 40, 31, .09) 0 1px,
    transparent 1px calc(100% / var(--ticks, 20)));
}
.fx.fx-ru .fx-ru__tube {
  position: relative;
  box-sizing: border-box; /* 枠線のぶん長くならないように */
  width: var(--w);
  height: 100%;
  border: 1px solid rgba(35, 40, 31, .30);
  border-radius: 2px;
  /* 中身。上に空気の層、下にいくほど濃い液 */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .85) 0 2px,
    #d8ebdd 2px 34%,
    #9fc9ae 68%,
    #74ab8c 100%);
  box-shadow: inset 0 -3px 5px rgba(35, 60, 45, .16);
  overflow: hidden;
}
/* ガラスの照り */
.fx-ru__tube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .95) 0 1px,
    rgba(255, 255, 255, .45) 1px 5px,
    transparent 5px 72%,
    rgba(255, 255, 255, .28) 100%);
  pointer-events: none;
}
/* 右端は液面。真鍮の線で締める */
.fx-ru__tube::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: var(--ru-brass);
}
.fx-ru__vol {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #1d3227;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fx-ru__vol > i { font-style: normal; font-weight: 400; font-size: .82em; margin-left: 2px; opacity: .72; }

/* ---- 1mLあたりの値段 ---- */
.fx.fx-ru .fx-ru__u { margin: 0; text-align: right; line-height: 1.25; white-space: nowrap; }
.fx.fx-ru .fx-ru__u > b {
  font-size: 2rem;
  font-weight: 700;
  color: #2f564a;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.fx.fx-ru .fx-ru__u > i {
  font-style: normal;
  font-size: 1.1rem;
  color: var(--ru-mute);
  margin-left: 3px;
}
.fx.fx-ru .fx-ru__pr {
  display: block;
  font-size: 1.14rem;
  color: var(--ru-mute);
  font-variant-numeric: tabular-nums;
}

/* ---- 数字の列の見出し ---- */
.fx.fx-ru .fx-ru__col {
  margin: 0 0 4px;
  text-align: right;
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--ru-brass);
}

/* ---- 読み取れること ---- */
.fx.fx-ru .fx-ru__band { margin: 0 0 16px; font-size: 1.24rem; line-height: 1.75; color: var(--ru-mute); }
.fx.fx-ru .fx-ru__read {
  margin: 26px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--ru-brass);
  background: rgba(255, 255, 255, .72);
  font-size: 1.4rem;
  line-height: 1.9;
}
.fx.fx-ru .fx-ru__key {
  display: block;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ru-brass);
  margin-bottom: 4px;
}
.fx.fx-ru .fx-ru__mask { margin: 14px 0 0; font-size: 1.28rem; line-height: 1.85; }

/* ---- 幅が狭いとき：名前を管の上に出す ---- */
@media screen and (max-width: 767px) {
  .fx.fx-ru { --ru-name: 0px; --ru-num: 8.4rem; }
  .fx-ru__rulerow { grid-template-columns: 1fr var(--ru-num); }
  .fx-ru__rulerow > span { display: none; }
  .fx.fx-ru .fx-ru__it {
    grid-template-columns: 1fr var(--ru-num);
    gap: 4px 12px;
    padding: 11px 0;
  }
  .fx.fx-ru .fx-ru__nm { grid-column: 1 / -1; text-align: left; font-size: 1.24rem; }
  /* 管が41pxしかなくなるので、内容量は管の中ではなく名前の行に置く */
  .fx.fx-ru .fx-ru__vol { display: none; }
  .fx.fx-ru .fx-ru__v2 {
    display: inline;
    margin-left: 8px;
    font-weight: 700;
    color: #2f564a;
    font-variant-numeric: tabular-nums;
  }
  .fx-ru__track { height: 24px; }
  .fx.fx-ru .fx-ru__u { align-self: center; }
  .fx.fx-ru .fx-ru__u > b { font-size: 1.8rem; }
  /* 目盛りの数字は、狭いと右端どうしが重なる。両端だけ残す。 */
  .fx.fx-ru .fx-ru__tk > i { display: none; }
  .fx.fx-ru .fx-ru__tk:first-of-type > i,
  .fx.fx-ru .fx-ru__tk:last-of-type > i { display: inline; }
}

/* ============================================================
   fx-fm —— 「ベッドを、長さのまま並べてみる」
   ここは図面にする。線は細く、色は最小限。
   紙は少し青みのある冷たい白（fx-ru の温かい紙と分ける）。
   植わっている部分だけが緑、寸法だけが真鍮。
   ※ 1rem = 10px
   ============================================================ */
.fx.fx-fm {
  --fm-paper: #eceff0;
  --fm-ink: #29383c;
  --fm-thin: rgba(41, 56, 60, .30);
  --fm-green: #56906f;   /* 紙に対して 3.24:1。1.98:1では図の主役がいちばん薄かった */
  --fm-brass: #8a6f3a;   /* 4.55:1 */

  background: var(--fm-paper);
  color: var(--fm-ink);
  box-shadow: inset 0 0 0 1px rgba(41, 56, 60, .12);
}
.fx.fx-fm .fx__eyebrow { color: var(--fm-brass); }
.fx.fx-fm .fx__eyebrow::after { background: rgba(41, 56, 60, .2); }
.fx.fx-fm .fx__title { color: var(--fm-ink); }
.fx.fx-fm .fx__lead { color: #3d4f52; }
.fx.fx-fm .fx__note { color: #5f6d72; border-top-color: rgba(41, 56, 60, .18); }
.ic-article .fx.fx-fm p,
.ic-article .fx.fx-fm li { color: #3d4f52; }
.ic-article .fx.fx-fm .fx__lead { color: #3d4f52; }
.ic-article .fx.fx-fm .fx__note { color: #5f6d72; }
.ic-article .fx.fx-fm .fx__eyebrow { color: var(--fm-brass); }
.ic-article .fx.fx-fm strong { color: var(--fm-ink); }

/* 図そのもの */
.fx-fm__sheet { margin: 4px 0 0; }
.fx-fm .fm-svg { display: block; width: 100%; height: auto; }

/* 5mごとの薄い当たり線 */
.fm-grid line { stroke: rgba(41, 56, 60, .11); stroke-width: 1; }

/* ベッド。育っている面なので、ここだけ色がつく */
.fm-bed { fill: var(--fm-green); opacity: 1; }
.fm-bed--res { fill: #67897b; opacity: 1; }
.fm-bed.is-cut { fill: #2c6440; opacity: 1; }

/* 組の番号 */
.fm-gn {
  fill: rgba(41, 56, 60, .71);
  font-size: 15px;
  text-anchor: end;
  font-family: "Noto Sans JP", sans-serif;
  font-variant-numeric: tabular-nums;
}
.fm-cap {
  fill: var(--fm-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: "Noto Sans JP", sans-serif;
}

/* 寸法線 */
.fm-dim line { stroke: var(--fm-brass); stroke-width: 1; }
.fm-arw { fill: var(--fm-brass); }
.fm-dimt {
  fill: var(--fm-brass);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: .06em;
  font-family: "Noto Sans JP", sans-serif;
}

/* 縮尺 */
.fm-sc-base { stroke: var(--fm-ink); stroke-width: 1; }
.fm-sc { stroke: rgba(41, 56, 60, .5); stroke-width: 1; }
.fm-sc.is-big { stroke: var(--fm-ink); }
.fm-sct {
  fill: rgba(41, 56, 60, .78);
  font-size: 15px;
  text-anchor: middle;
  font-family: "Noto Sans JP", sans-serif;
  font-variant-numeric: tabular-nums;
}
.fm-scu { fill: var(--fm-brass); font-size: 15px; font-family: "Noto Sans JP", sans-serif; }

/* 図の名前（図面の表題） */
.fm-sheet-t line { stroke: rgba(41, 56, 60, .34); stroke-width: 1; }
.fm-sheet-t1 {
  fill: var(--fm-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: "Noto Sans JP", sans-serif;
}
.fm-sheet-t2 {
  fill: #5f6d72;
  font-size: 15px;
  letter-spacing: .02em;
  font-family: "Noto Sans JP", sans-serif;
}

/* 引き出し線（収穫の組から右の欄へ） */
.fm-lead line { stroke: var(--fm-brass); stroke-width: 1; stroke-dasharray: 4 3; }
.fm-lead circle { fill: var(--fm-brass); }

/* 右の欄 = 図面の表題欄 */
.fm-tb-box { fill: rgba(255, 255, 255, .66); stroke: rgba(41, 56, 60, .34); stroke-width: 1; }
.fm-tb-r { stroke: rgba(41, 56, 60, .18); stroke-width: 1; }
.fm-tb-h {
  fill: var(--fm-brass);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .18em;
  font-family: "Noto Sans JP", sans-serif;
}
.fm-tb-k {
  fill: #687679;
  font-size: 15px;
  letter-spacing: .02em;
  font-family: "Noto Sans JP", sans-serif;
}
.fm-tb-v {
  fill: var(--fm-ink);
  font-size: 17px;
  font-weight: 700;
  text-anchor: end;
  font-variant-numeric: tabular-nums;
  font-family: "Noto Sans JP", sans-serif;
}

/* 図と直接つながらない諸元は、SVGの外に出す。
   SVGの中に置くと viewBox の倍率で縮み、幅が狭いと8.4pxまで落ちて読めない。 */
.fx.fx-fm .fx-fm__spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 0;
  padding: 0;
  background: rgba(41, 56, 60, .16);
  border: 1px solid rgba(41, 56, 60, .16);
  border-radius: 2px;
  overflow: hidden;
}
.fx.fx-fm .fx-fm__spec > div {
  background: rgba(255, 255, 255, .72);
  padding: 11px 14px 12px;
}
.fx.fx-fm .fx-fm__spec dt {
  margin: 0 0 2px;
  font-size: 1.16rem;
  line-height: 1.5;
  color: #5f6d72;
}
.fx.fx-fm .fx-fm__spec dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fm-ink);
  font-variant-numeric: tabular-nums;
}
@media screen and (max-width: 620px) {
  .fx.fx-fm .fx-fm__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 図の見かた */
.fx.fx-fm .fx-fm__read {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--fm-brass);
  background: rgba(255, 255, 255, .7);
  font-size: 1.4rem;
  line-height: 1.9;
}
.fx.fx-fm .fx-fm__key {
  display: block;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--fm-brass);
  margin-bottom: 4px;
}

/* 幅が狭いとき。図は横に置いたまま、指で送れるようにする。
   縮尺の図なので、縮めて読めなくするより、そのまま横に流したほうがよい。 */
@media screen and (max-width: 767px) {
  .fx-fm__sheet {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -18px;
    margin-right: -18px;
    padding: 0 18px;
  }
  /* viewBoxが962なので、900pxで倍率0.935。15px指定が実寸14pxになる。
     760pxだと11.85pxまで落ちて読めなかった。横送りの距離より読めることを取る。 */
  .fx-fm .fm-svg { width: 900px; max-width: none; }
  .fx-fm__sheet::after {
    content: "→ 横にスクロールできます";
    display: block;
    padding-top: 6px;
    font-size: 1.1rem;
    color: #5f6d72;
  }
}

/* ============================================================
   fx-dr —— 「はじめの一歩は、6つあります」
   ほかの3つ（ものさし・図面・箱の裏）は組版と作図で作った。
   ここは写真で作る。手元の公式写真は902〜1720pxあり、
   濃い地に置くといちばん締まって見える。
   金の線画・輪・チップは使わない（前の語彙に戻さない）。
   ※ 1rem = 10px
   ============================================================ */
.fx.fx-dr {
  --dr-ink: #14201a;      /* ほかの濃い地の見せ場と同じトークンにそろえる */
  --dr-line: rgba(255, 255, 255, .14);
  --dr-dim: rgba(255, 255, 255, .62);
  --dr-key: #d9c39a;      /* アイブローは7枚共通の真鍮。ここだけ緑にしていた */

  background: var(--dr-ink);
  color: #fff;
}
.fx.fx-dr .fx__eyebrow { color: var(--dr-key); }
.fx.fx-dr .fx__eyebrow::after { background: var(--dr-line); }
.fx.fx-dr .fx__title { color: #fff; }
.fx.fx-dr .fx__lead { color: rgba(255, 255, 255, .84); }
.fx.fx-dr .fx__note { color: rgba(255, 255, 255, .6); border-top-color: var(--dr-line); }

.fx-dr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  gap: 26px;
  /* 右の列が先に終わって下に黒い空白が残っていた。
     左と同じ高さまで伸ばし、5行を等間隔に配る。 */
  align-items: stretch;
}

/* ---- 迷ったらこれ ---- */
.fx.fx-dr .fx-dr__main { margin: 0; padding: 0; }
.fx-dr__mainim {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  /* 写真は縦位置で来る（1129x1453）。上下を少し詰めて据わりを良くする */
  aspect-ratio: 4 / 4.4;
  background: #0d120f;
}
.fx-dr__mainim .fx-dr__im {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.fx-dr__flag {
  position: absolute;
  left: 0;
  top: 18px;
  padding: 6px 14px 6px 16px;
  background: #f4f1e7;
  color: #14201a;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 0 2px 2px 0;
}
.fx.fx-dr .fx-dr__maincap { padding: 16px 2px 0; }
.fx.fx-dr .fx-dr__why {
  margin: 0 0 5px;
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: var(--dr-key);
}
.fx.fx-dr .fx-dr__mainnm {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}
.fx.fx-dr .fx-dr__mainsub {
  margin: 4px 0 0;
  font-size: 1.24rem;
  color: var(--dr-dim);
}
.fx.fx-dr .fx-dr__mainyen {
  margin: 10px 0 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fx-dr__mainyen > b { font-size: 3rem; font-weight: 700; letter-spacing: .01em; }
.fx-dr__mainyen > i { font-style: normal; font-size: 1.3rem; margin-left: 4px; color: var(--dr-dim); }
.fx.fx-dr .fx-dr__mainnote {
  margin: 12px 0 0;
  font-size: 1.32rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .8);
  padding-top: 12px;
  border-top: 1px solid var(--dr-line);
}

/* ---- 残りの5つ ---- */
.fx.fx-dr .fx-dr__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fx.fx-dr .fx-dr__row {
  /* 5行で高さを等分する。space-between だと行の下に空きができて
     区切り線が宙に浮いて見えた。 */
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 14px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--dr-line);
}
.fx.fx-dr .fx-dr__row::before,
.fx.fx-dr .fx-dr__row::marker { content: none; }
/* 1行目は padding-top:0 なので、上端を主写真の上端に合わせる。
   align-items:center のままだと 26.9px 下がる。 */
.fx.fx-dr .fx-dr__row:first-child { padding-top: 0; align-items: start; }
.fx.fx-dr .fx-dr__row:last-child { border-bottom: 0; }

.fx-dr__thumb {
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
  background: #0d120f;
}
/* 切り抜きの縦長写真は、4:3だと上下が切れる */
.fx-dr__thumb.is-square {
  aspect-ratio: 1 / 1;
  /* 切り抜きなので、地が黒いままだと明るい写真4枚のなかで1枚だけ穴に見える */
  background: #f2f0e8;
}
.fx-dr__thumb.is-square .fx-dr__im { object-fit: contain; }

.fx-dr__thumb .fx-dr__im {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 写真ごとに、製品が写っているところを見せる */
  /* 5枚とも元画像がきっかり4:3なので cover のはみ出しが0で、
     object-position では動かせない。拡大の軸で切り取り位置を決める。 */
  object-position: 50% 50%;
  transform: scale(var(--oz, 1));
  transform-origin: var(--op, 50% 50%);
  display: block;
}
.fx.fx-dr .fx-dr__nm {
  margin: 2px 0 0;
  font-size: 1.42rem;
  line-height: 1.5;
  color: #fff;
}
.fx.fx-dr .fx-dr__yen {
  margin: 0;
  text-align: right;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fx-dr__yen > b { font-size: 1.92rem; font-weight: 700; }
.fx-dr__yen > i { font-style: normal; font-size: 1.14rem; margin-left: 2px; color: var(--dr-dim); }

/* ほかの3つ（ものさし・図面・箱の裏）と同じ締めくくりの箱。
   fx-dr にだけ無く、結論がいちばん読みにくい注記の中にあった。 */
.fx.fx-dr .fx-dr__read {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--fx-brass);
  background: rgba(255, 255, 255, .06);
  font-size: 1.4rem;
  line-height: 1.9;
}
.fx.fx-dr .fx-dr__key {
  display: block;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--fx-brass-lt);
  margin-bottom: 4px;
}

@media screen and (max-width: 767px) {
  .fx-dr__grid { grid-template-columns: 1fr; gap: 22px; }
  .fx-dr__mainim { aspect-ratio: 4 / 3.4; }
  .fx.fx-dr .fx-dr__row { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 0 12px; }
  .fx.fx-dr .fx-dr__mainnm { font-size: 1.86rem; }
  .fx-dr__mainyen > b { font-size: 2.6rem; }
  .fx.fx-dr .fx-dr__nm { font-size: 1.32rem; }
  .fx-dr__yen > b { font-size: 1.72rem; }
}

/* ============================================================
   スマホでの文字の大きさ
   利用者の9割がスマホなので、見せ場の小さいラベルを底上げする。
   実測で 10.2〜11.4px のものがあり、結論を書いている札まで小さかった。
   ============================================================ */
@media screen and (max-width: 767px) {
  /* 箱の裏 */
  .fx.fx-lb .fx-lb__badge { font-size: 1.24rem; padding: 4px 10px; }
  .fx.fx-lb .fx-lb__tag { font-size: 1.18rem; letter-spacing: .18em; text-indent: .18em; }
  .fx.fx-lb .fx-lb__vol { font-size: 1.2rem; }
  .fx.fx-lb .fx-lb__no { font-size: .86em; }

  /* ものさし */
  .fx.fx-ru .fx-ru__pr { font-size: 1.24rem; }
  .fx.fx-ru .fx-ru__sub { font-size: 1.2rem; }
  .fx.fx-ru .fx-ru__col { font-size: 1.2rem; }
  .fx.fx-ru .fx-ru__tk > i { font-size: 1.24rem; }

  /* 値段の分布 */
  .fx .fx-pr__tick { font-size: 1.2rem; }

  /* 4つに共通する「読み取れること」の見出し */
  .fx.fx-ru .fx-ru__key,
  .fx.fx-fm .fx-fm__key,
  .fx.fx-lb .fx-lb__key,
  .fx.fx-dr .fx-dr__key { font-size: 1.24rem; }

  /* 図面の中の説明 */
  .fx.fx-fm .fx-fm__spec dt { font-size: 1.24rem; }
  .ic-article .fx .fx-ev__src { font-size: 1.22rem; }
  .fx.fx-w .fx-w__cn { font-size: 1.22rem; }
}


/* --- 押したあとも色を変えない（a:visited 対策） --- */
/* style.min.css の a:visited{color:#000} は (0,1,1) で、
   クラス1つの指定 (0,1,0) より強い。押したあとだけ黒くなるのを打ち消す。 */
.fx:visited { color: #fff; }
.fx__eyebrow:visited { color: var(--fx-brass-lt); }
.fx h3.fx__title:visited,
.fx .fx__title:visited { color: #fff; }
.fx__lead:visited { color: rgba(255, 255, 255, .84); }
.fx__note:visited { color: rgba(255, 255, 255, .58); }
.fx__note a:visited { color: rgba(255, 255, 255, .82); }
.fx.fx-lb .fx__note a:visited { color: var(--lb-ink); }
.fx.fx-ru .fx__note a:visited { color: var(--ru-ink); }
.fx.fx-fm .fx__note a:visited { color: var(--fm-ink); }
* ------------------------------------------------------------
   本文の指定に負けないようにする。
   .ic-article p:visited { color: #3a463d; }
.ic-article .fx p:visited,
.ic-article .fx li:visited,
.ic-article .fx dd:visited,
.ic-article .fx td:visited,
.ic-article .fx th:visited { color: rgba(255, 255, 255, .84); }
.ic-article .fx .fx__note:visited { color: rgba(255, 255, 255, .58); }
.ic-article .fx .fx__eyebrow:visited { color: var(--fx-brass-lt); }
.ic-article .fx strong:visited { color: #fff; }
.ic-article .fx a:visited { color: rgba(255, 255, 255, .9); }
.fx-pr__tick:visited { color: rgba(255, 255, 255, .48); }
.ic-article .fx .fx-pr__nm:visited,
.fx-pr__nm:visited { color: rgba(255, 255, 255, .8); }
.ic-article .fx .fx-pr__val:visited,
.fx-pr__val:visited { color: rgba(255, 255, 255, .9); }
.ic-article .fx .fx-pr__row.is-hero .fx-pr__nm:visited,
.ic-article .fx .fx-pr__row.is-hero .fx-pr__val:visited { color: #fff; }
.ic-article .fx .fx-pr__hero:visited { color: rgba(255, 255, 255, .86); }
.ic-article .fx .fx-pr__hero strong:visited { color: var(--fx-brass-lt); }
.fx-ev__open:visited { color: var(--fx-brass-lt); }
.ic-article .fx .fx-ev__src:visited { color: var(--fx-brass-lt); }
.ic-article .fx h4.fx-ev__what:visited,
.fx-ev__what:visited { color: #fff; }
.ic-article .fx .fx-ev__quote:visited { color: rgba(255, 255, 255, .8); }
.ic-article .fx .fx-ev__tr:visited { color: rgba(255, 255, 255, .56); }
.ic-article .fx a.fx-ev__link:visited { color: var(--fx-brass-lt); }
.ic-article .fx .fx-ev__cap:visited { color: rgba(255, 255, 255, .52); }
.ic-article .fx .fx-ev__cap a:visited { color: var(--fx-brass-lt); }
.ic-article .fx .fx-ev__list > li:visited { color: rgba(255, 255, 255, .86); }
.ic-article .fx .fx-ev__list b:visited { color: #fff; }
.ic-article .fx .fx-ev__list em:visited { color: rgba(255, 255, 255, .55); }
.ic-article .fx .fx-ev__strip p:visited { color: rgba(255, 255, 255, .8); }
.ic-article .fx a.fx-ev__shot:visited,
.ic-article .fx a.fx-ev__plateshot:visited,
.ic-article .fx .fx-ev__strip a:visited { color: inherit; }
.ic-article .fx a.fx-ev__platelink:visited,
.fx-ev__platelink:visited { color: inherit; }
.fx-w__eb-en:visited { color: #e6cf9a; }
.fx-w__eb-jp:visited { color: #e7ece2; }
.ic-article .fx h3.fx-w__title:visited,
.fx-w__title:visited { color: #fff; }
.fx-w__em:visited { color: #f0d79c; }
.ic-article .fx .fx-w__body:visited,
.fx-w__body:visited { color: #dfe6da; }
.fx-w__mark:visited { color: #fff; }
.fx-w__chip:visited { color: #eef1e9; }
.fx-w__chip .fx-w__cn:visited { color: #f0d79c; }
.fx-w__chip.is-hot:visited { color: #16241c; }
.fx-w__chip.is-hot .fx-w__cn:visited { color: #16241c; }
.ic-article .fx .fx-w__cap:visited,
.fx-w__cap:visited { color: #d7ddd0; }
.fx-w__cap b:visited { color: #f0d79c; }
.ic-article .fx .fx-w__note:visited,
.fx-w__note:visited { color: rgba(255, 255, 255, .5); }
.fx.fx-lb:visited { color: var(--lb-ink); }
.fx.fx-lb .fx__eyebrow:visited { color: #8a7644; }
.fx.fx-lb .fx__title:visited { color: var(--lb-ink); }
.fx.fx-lb .fx__lead:visited { color: #45443b; }
.fx.fx-lb .fx__note:visited { color: var(--lb-mute); }
.ic-article .fx.fx-lb p:visited,
.ic-article .fx.fx-lb li:visited { color: #45443b; }
.ic-article .fx.fx-lb .fx__lead:visited { color: #45443b; }
.ic-article .fx.fx-lb .fx__note:visited { color: var(--lb-mute); }
.ic-article .fx.fx-lb .fx__eyebrow:visited { color: #8a7644; }
.ic-article .fx.fx-lb strong:visited { color: var(--lb-ink); }
.fx-lb__nm:visited { color: var(--lb-ink); }
.fx-lb__vol:visited { color: var(--lb-mute); }
.fx.fx-lb .fx-lb__text:visited { color: #35342d; }
.fx-lb__sep:visited { color: var(--lb-mute); }
.fx-lb__more:visited { color: var(--lb-mute); }
.fx-lb__no:visited { color: #6b6a5e; }
.fx-lb__w.is-first:visited { color: var(--lb-green); }
.fx-lb__w.is-first .fx-lb__no:visited { color: var(--lb-green); }
.fx-lb__w.is-water:visited { color: var(--lb-water); }
.fx-lb__w.is-water .fx-lb__no:visited { color: var(--lb-water); }
.fx-lb__badge.is-first:visited { color: var(--lb-green); }
.fx-lb__badge.is-water:visited { color: var(--lb-water); }
.fx-lb__badge.is-none:visited { color: var(--lb-mute); }
.fx.fx-lb .fx-lb__key:visited { color: #8a7644; }
.fx.fx-ru:visited { color: var(--ru-ink); }
.fx.fx-ru .fx__eyebrow:visited { color: var(--ru-brass); }
.fx.fx-ru .fx__title:visited { color: var(--ru-ink); }
.fx.fx-ru .fx__lead:visited { color: #444b3f; }
.fx.fx-ru .fx__note:visited { color: var(--ru-mute); }
.ic-article .fx.fx-ru p:visited,
.ic-article .fx.fx-ru li:visited,
.ic-article .fx.fx-ru dd:visited { color: #444b3f; }
.ic-article .fx.fx-ru .fx__lead:visited { color: #444b3f; }
.ic-article .fx.fx-ru .fx__note:visited { color: var(--ru-mute); }
.ic-article .fx.fx-ru .fx__eyebrow:visited { color: var(--ru-brass); }
.ic-article .fx.fx-ru strong:visited { color: var(--ru-ink); }
.ic-article .fx.fx-ru a:visited { color: #2f564a; }
.fx-ru__tk > i:visited { color: var(--ru-mute); }
.fx-ru__tk > i > em:visited { color: var(--ru-brass); }
.fx.fx-ru .fx-ru__nm:visited { color: var(--ru-ink); }
.fx.fx-ru .fx-ru__sub:visited { color: var(--ru-mute); }
.fx-ru__vol:visited { color: #1d3227; }
.fx.fx-ru .fx-ru__u > b:visited { color: #2f564a; }
.fx.fx-ru .fx-ru__u > i:visited { color: var(--ru-mute); }
.fx.fx-ru .fx-ru__pr:visited { color: var(--ru-mute); }
.fx.fx-ru .fx-ru__col:visited { color: var(--ru-brass); }
.fx.fx-ru .fx-ru__band:visited { color: var(--ru-mute); }
.fx.fx-ru .fx-ru__key:visited { color: var(--ru-brass); }
.fx.fx-ru .fx-ru__v2:visited { color: #2f564a; }
.fx.fx-fm:visited { color: var(--fm-ink); }
.fx.fx-fm .fx__eyebrow:visited { color: var(--fm-brass); }
.fx.fx-fm .fx__title:visited { color: var(--fm-ink); }
.fx.fx-fm .fx__lead:visited { color: #3d4f52; }
.fx.fx-fm .fx__note:visited { color: #5f6d72; }
.ic-article .fx.fx-fm p:visited,
.ic-article .fx.fx-fm li:visited { color: #3d4f52; }
.ic-article .fx.fx-fm .fx__lead:visited { color: #3d4f52; }
.ic-article .fx.fx-fm .fx__note:visited { color: #5f6d72; }
.ic-article .fx.fx-fm .fx__eyebrow:visited { color: var(--fm-brass); }
.ic-article .fx.fx-fm strong:visited { color: var(--fm-ink); }
.fx.fx-fm .fx-fm__spec dt:visited { color: #5f6d72; }
.fx.fx-fm .fx-fm__spec dd:visited { color: var(--fm-ink); }
.fx.fx-fm .fx-fm__key:visited { color: var(--fm-brass); }
.fx.fx-dr:visited { color: #fff; }
.fx.fx-dr .fx__eyebrow:visited { color: var(--dr-key); }
.fx.fx-dr .fx__title:visited { color: #fff; }
.fx.fx-dr .fx__lead:visited { color: rgba(255, 255, 255, .84); }
.fx.fx-dr .fx__note:visited { color: rgba(255, 255, 255, .6); }
.fx-dr__flag:visited { color: #14201a; }
.fx.fx-dr .fx-dr__why:visited { color: var(--dr-key); }
.fx.fx-dr .fx-dr__mainnm:visited { color: #fff; }
.fx.fx-dr .fx-dr__mainsub:visited { color: var(--dr-dim); }
.fx-dr__mainyen > i:visited { color: var(--dr-dim); }
.fx.fx-dr .fx-dr__mainnote:visited { color: rgba(255, 255, 255, .8); }
.fx.fx-dr .fx-dr__nm:visited { color: #fff; }
.fx-dr__yen > i:visited { color: var(--dr-dim); }
.fx.fx-dr .fx-dr__key:visited { color: var(--fx-brass-lt); }