/* Paddle Radar — bảng giá
 *
 * これは店ではなく「値段の板」である。
 *
 * ベトナムの市場・phở の店・携帯屋には、必ず手書きの価格板がある。
 * 広告ではなく事実の掲示で、だからこそ信用される。このサイトは548本ぶんのそれにあたる。
 * 商売の顔（Shopee のオレンジ、赤い値札、煽り）に寄せると、売り手に見える。
 * ここで売っているのは「売り手ではないこと」なので、そこには寄せない。
 *
 * 色はコートから採る。
 *   淡い緑灰   = コート周縁のアクリル。地の色
 *   白         = コートのライン。面と仕切りに使う
 *   濃い青緑   = キッチン（ノンボレーゾーン）。構造の色
 *   マゼンタ   = 値段が動いたときだけ。飾りには使わない
 *
 * 仕切りは灰色の 1px ではなく、白い 2px にする。
 * コートに引かれた線がゾーンの境を意味するのと同じで、
 * 線が出る場所は「情報の区画が変わる場所」だけにする。
 *
 * 太さを使うのは1か所だけ。値段である。
 * 価格比較の板で主役は数字であり、それ以外は静かにしておく。
 */
:root {
  --court:   #e6ebe7;   /* コート周縁のアクリル。地 */
  --line:    #fdfefd;   /* ラインの白。面 */
  --rule:    #ffffff;   /* 仕切り線 */
  --ink:     #11201b;   /* 緑を含んだ黒 */
  --ink2:    #42564d;
  --ink3:    #6f837a;
  --kitchen: #0b6b57;   /* キッチンの青緑。構造 */
  --kitchen2:#e2efea;   /* その淡い面 */
  --drop:    #d6006e;   /* 値動き。ここだけ強い */
  --kevlar:  #9a6508;   /* ケブラーの琥珀。新着 */
  --warn:    #9a4a08;
  --r:       10px;
  --font:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI",
             "Hiragino Sans", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif;
  /* 比較の3本。コートの色域から採り、明度差も付ける */
  --pr-1: #0b6b57;  --pr-2: #d6006e;  --pr-3: #1d4ed8;
  --pr-accent: var(--kitchen);
  --pr-bg: var(--court); --pr-surface: var(--line); --pr-line: var(--rule);
  --pr-grid: #cdd8d1; --pr-ink: var(--ink); --pr-ink2: var(--ink2); --pr-ink3: var(--ink3);
  --pr-warn: var(--warn); --pr-radius: var(--r); --pr-font: var(--font);
  --pr-soft: var(--kitchen2);
}
/* 夜のコート。照明の下 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --court: #0c1512; --line: #152019; --rule: #22342b;
    --ink: #e4ece7; --ink2: #a9bdb3; --ink3: #7d9289;
    --kitchen: #2fb394; --kitchen2: #16241e; --drop: #ff4d9d; --kevlar: #e0a93f;
    --warn: #e0a93f; --pr-grid: #2a3d34;
    --pr-1: #2fb394; --pr-2: #ff4d9d; --pr-3: #6ea2ff;
  }
}
:root[data-theme="dark"] {
  --court: #0c1512; --line: #152019; --rule: #22342b;
  --ink: #e4ece7; --ink2: #a9bdb3; --ink3: #7d9289;
  --kitchen: #2fb394; --kitchen2: #16241e; --drop: #ff4d9d; --kevlar: #e0a93f;
  --warn: #e0a93f; --pr-grid: #2a3d34;
  --pr-1: #2fb394; --pr-2: #ff4d9d; --pr-3: #6ea2ff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--court); color: var(--ink);
  font-family: var(--font); font-weight: 400; line-height: 1.65; }
a { color: var(--kitchen); }
:focus-visible { outline: 3px solid var(--drop); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; }

/* ── 見出し。1書体の重みの幅で階層を作る ───────────────── */
h1 { font-size: clamp(23px, 4.6vw, 33px); line-height: 1.22; font-weight: 800;
  letter-spacing: -.021em; margin: 18px 0 8px; max-width: 24ch; }
h2 { font-size: 19px; font-weight: 800; letter-spacing: -.012em;
  margin: 34px 0 10px; padding-bottom: 7px; border-bottom: 2px solid var(--rule); }
h3 { font-weight: 700; }
p.lead { color: var(--ink2); margin: 0 0 18px; max-width: 62ch; font-weight: 400; }
.note { font-size: 13px; color: var(--ink3); line-height: 1.7; }

/* ── ヘッダ ───────────────────────────────────────────
   キッチン（青緑）の帯を1本敷く。コートの区画がそのまま画面の区画になる。 */
header.site { background: var(--kitchen); position: sticky; top: 0; z-index: 30; }
header.site .row { display: flex; align-items: center; gap: 14px;
  max-width: 1120px; margin: 0 auto; padding: 10px 16px; }
.brandmark { font-weight: 800; font-size: 19px; letter-spacing: -.028em;
  color: #fff; text-decoration: none; white-space: nowrap; }
.brandmark span { color: #a8e8d6; }
nav.main { display: flex; gap: 15px; margin-left: auto; flex-wrap: nowrap; }
nav.main a { white-space: nowrap; color: #c6e8de; text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 5px 1px; border-bottom: 2px solid transparent; }
nav.main a:hover { color: #fff; }
nav.main a[aria-current="page"] { color: #fff; border-bottom-color: #fff; font-weight: 700; }
.langPick, .curPick { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 9px;
  border-radius: 7px; border: 0; background: rgba(255,255,255,.16); color: #fff;
  min-height: 36px; }
.langPick option, .curPick option { color: var(--ink); background: var(--line); }

/* ── 予算の入口 ───────────────────────────────────────
   ベトナム人が最初に決めるのは「tầm giá（予算）」である。
   だから一覧より先に、予算の扉を置く。眺めさせるのではなく、選ばせる。 */
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--rule); border: 2px solid var(--rule); margin: 0 0 16px; }
/* 扉は「押すもの」だと分かる必要がある。コートの線を1本、足元に引く。
   平らな文字の並びに見えていたので、太さと下線で押せることを示す。 */
.door { background: var(--line); color: var(--ink); text-decoration: none;
  padding: 15px 13px 11px; display: flex; flex-direction: column; gap: 4px;
  border-bottom: 4px solid var(--pr-grid); transition: background .12s, border-color .12s; }
.door:hover, .door:focus-visible { background: var(--kitchen2);
  border-bottom-color: var(--kitchen); }
.door b { font-size: clamp(17px, 2.5vw, 22px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.12; }
.door span { font-size: 12.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .doors { grid-template-columns: repeat(2, 1fr); }
  .door { padding: 11px 10px; } }

/* ── 一覧 ─────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 2px; background: var(--rule); border: 2px solid var(--rule);
  margin: 16px 0 40px; }
.pcard { background: var(--line); padding: 13px; display: flex; flex-direction: column;
  gap: 7px; position: relative; }
.pcard[hidden] { display: none; }
.pcard:hover { background: var(--kitchen2); }
.pcard .thumb { aspect-ratio: 1/1; background: #fff; display: flex;
  align-items: center; justify-content: center; overflow: hidden; position: relative; }
.pcard .thumb img { width: 100%; height: 100%; object-fit: contain; }
.noimg { color: var(--ink3); }
/* 大文字化はしない。ベトナム語は声調記号が頭に乗るので、大文字にすると潰れる */
.pcard .brand { font-size: 12px; font-weight: 700; color: var(--kitchen);
  letter-spacing: .005em; }
.pcard h3 { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 500;
  min-height: calc(14.5px * 1.35 * 2); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── 値段。ここだけ大きくする ──────────────────────────
   価格比較の板で主役は数字である。公表値と同じ大きさに置くのは順序が逆。 */
.priceLine { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 2px 0 1px; }
.priceLine .pr { font-size: clamp(21px, 3vw, 25px); font-weight: 800; line-height: 1.1;
  letter-spacing: -.028em; font-variant-numeric: tabular-nums; color: var(--ink); }
.priceLine .v-na { font-size: 18px; font-weight: 500; color: var(--ink3); }
.priceLine .was { font-size: 13px; font-weight: 500; color: var(--ink3);
  text-decoration: line-through; font-variant-numeric: tabular-nums; }
/* 換算値の印。ベトナム語の画面では548本中441本が換算になるため、
   濃い点線を全部に引くと、目印ではなく雑音になる。細く薄くして、
   「店の値段そのもの」である残りとの差だけが分かるようにする。 */
.pr.conv { border-bottom: 1px dotted var(--pr-grid); }
.fx { display: block; font-size: 12px; color: var(--ink3); margin-top: 1px;
  font-variant-numeric: tabular-nums; }

/* 公表値は値段の下に、静かに置く */
.specRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  padding: 7px 0; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.sp { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.sp i { font-style: normal; font-size: 11.5px; color: var(--ink3); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp > span { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.v-na { color: var(--ink3); font-weight: 400; }

.tagRow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 23px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; border: 1.5px solid currentColor; }
.tag.power { color: #b3155c; } .tag.pop { color: #9a6508; }
.tag.control { color: #1d4ed8; } .tag.balanced { color: #0b6b57; }
.tag.handling { color: #6d28d9; } .tag.forgiveness { color: #0b6b7a; }
.tag.unk { color: var(--ink3); }
.gen { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px;
  background: var(--court); color: var(--ink2); }
.gen.est { background: transparent; border: 1.5px dashed var(--pr-grid); }
.gen.na { background: transparent; border: 1.5px dashed var(--pr-grid); color: var(--ink3); }
.rel { font-size: 11.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.stk { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.stk.ok { background: transparent; color: var(--ink3); border: 1.5px solid var(--pr-grid); }
.stk.out { background: #f6ead9; color: #8a4208; }
.stk.dis { background: #f7e3e3; color: #992a22; }
.stk.pre { background: var(--kitchen2); color: var(--kitchen); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stk.out { background: #2e2314; color: #e8b96d; }
  :root:not([data-theme="light"]) .stk.dis { background: #2e1a19; color: #eda097; }
}
.flag { font-size: 11.5px; color: var(--warn); font-weight: 700; }
.flag.ph { min-height: 15px; }

.pickbox { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 5px 0; min-height: 44px; color: var(--ink2); }
.pickbox input { width: 21px; height: 21px; accent-color: var(--kitchen); }
.outlink { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 0;
  font-size: 12.5px; font-weight: 700; color: var(--kitchen); text-decoration: none; }
.outlink:hover { text-decoration: underline; }

/* ── 注目の札 ─────────────────────────────────────────
   値下がりだけマゼンタにする。4つとも目立たせれば、どれも目立たない。 */
.hb { position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 11px; font-weight: 800; line-height: 1; padding: 5px 8px;
  color: #fff; letter-spacing: .005em; white-space: nowrap; }
.hb-deal    { background: var(--drop); }
.hb-new     { background: var(--kitchen); }
.hb-restock { background: #1d4ed8; }
.hb-going   { background: #8a4208; }
.hb-pro     { background: #5b21b6; }

/* ── 動いているもの ─────────────────────────────────── */
.heatBox { border: 2px solid var(--rule); background: var(--kitchen2);
  padding: 10px 10px 8px; margin: 0 0 14px; }
.heatBox > h2 { margin: 0; font-size: 15px; display: inline; border: 0; padding: 0; }
.heatBox > .note { margin: 0 0 8px; display: inline; font-size: 12px; }
.heatBox > .note::before { content: " — "; }
.heatRow { margin: 0; }
.heatRow > .grid {
  display: grid;
  /* grid-auto-flow: column は「暗黙の列」にしか効かない。
     grid-template-columns を消さないと縦に積まれる（iPhone 幅で 4000px になっていた）。*/
  grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: 152px;
  gap: 2px; margin: 0; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; border: 0; background: var(--rule);
}
.heatRow > .grid > .pcard { scroll-snap-align: start; }
.heatRow .pcard { padding: 7px; gap: 4px; }
.heatRow .pcard .thumb { aspect-ratio: 16/10; }
.heatRow .pcard .brand { font-size: 10px; }
.heatRow .pcard h3 { font-size: 11.5px; line-height: 1.3; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.heatRow .pcard .hb { font-size: 9px; padding: 3px 5px; }
.heatRow .pcard .priceLine .pr { font-size: 15px; }
.heatRow .pcard .specRow,
.heatRow .pcard .tagRow,
.heatRow .pcard .flag,
.heatRow .pcard .pickbox,
.heatRow .pcard .outlink { display: none; }

/* ── 絞り込み ───────────────────────────────────────── */
.filters { border: 2px solid var(--rule); background: var(--line);
  padding: 0; margin: 0 0 14px; }
.filters > summary { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer; list-style: none; padding: 11px 13px;
  font-weight: 700; font-size: 14px; min-height: 44px; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary .fsum { display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; }
/* 記号は端末に字が無いと豆腐（□）になる。線で描けばどこでも同じに見える */
.filters > summary .fsum::before { content: ""; width: 0; height: 0; flex: none;
  border-left: 6px solid var(--kitchen); border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent; transition: transform .14s; }
.filters[open] > summary .fsum::before { transform: rotate(90deg); }
.filters[open] > summary { border-bottom: 2px solid var(--rule); }
.filters > summary .fcount { white-space: nowrap; font-weight: 500; }
.fgroup, .frow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 0 13px; }
.fgroup { margin: 10px 0; } .frow { margin: 10px 0; }
.fset { display: flex; flex-wrap: wrap; gap: 6px; }
.flabel { font-size: 12px; font-weight: 700; color: var(--ink3); width: 100%; }
.fbtn { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px; min-height: 38px;
  border: 1.5px solid var(--pr-grid); border-radius: 999px; background: var(--line);
  color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; }
.fbtn:hover { border-color: var(--kitchen); color: var(--ink); }
.fbtn.on { background: var(--kitchen); border-color: var(--kitchen); color: #fff;
  font-weight: 700; }
.fnum { font-size: 12px; opacity: .72; font-variant-numeric: tabular-nums; }
.fbtn.on .fnum { opacity: .9; }
.fpicks { gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 2px solid var(--rule); }
.fsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--ink3); font-weight: 500; }
.fsel select { font: inherit; font-size: 13px; padding: 6px 9px; min-height: 36px;
  border: 1.5px solid var(--pr-grid); border-radius: 7px; background: var(--line);
  color: var(--ink); max-width: 46vw; }
.fcount { margin-left: auto; font-size: 13px; color: var(--ink3); white-space: nowrap; }
.fcount b { color: var(--ink); font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums; }

/* ── 押せるもの ───────────────────────────────────────
   影も持ち上がりも付けない。板に貼った札は浮かない。 */
.cta { margin: 14px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; background: var(--kitchen); color: #fff;
  text-decoration: none; font-weight: 700; padding: 11px 19px; border-radius: 7px;
  min-height: 44px; line-height: 1.3; }
.btn:hover { background: var(--ink); }
.btn.small { padding: 7px 13px; font-size: 13px; min-height: 38px; }

/* ── 比較 ─────────────────────────────────────────── */
.cmpBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--line); border-top: 2px solid var(--kitchen);
  transform: translateY(105%); transition: transform .2s ease; }
.cmpBar.on { transform: translateY(0); }
.cmpBar .inner { max-width: 1120px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slot { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--pr-grid);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; min-width: 150px; min-height: 44px; }
.slot.filled { border-style: solid; }
.slot.s1 { border-color: var(--pr-1); } .slot.s2 { border-color: var(--pr-2); }
.slot.s3 { border-color: var(--pr-3); }
.slot .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.slot.s1 .dot { background: var(--pr-1); } .slot.s2 .dot { background: var(--pr-2); }
.slot.s3 .dot { background: var(--pr-3); }
.slot .x { margin-left: auto; cursor: pointer; color: var(--ink3); font-size: 18px;
  line-height: 1; padding: 4px 6px; }
.cmpGo { margin-left: auto; background: var(--drop); color: #fff; border: 0;
  border-radius: 7px; padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer;
  min-height: 44px; }
.cmpGo[disabled] { opacity: .4; cursor: default; }
.cmpHead { display: grid; gap: 14px; margin: 18px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cmpCol { border-top: 5px solid var(--pr-grid); padding-top: 11px; }
.cmpCol.c1 { border-top-color: var(--pr-1); } .cmpCol.c2 { border-top-color: var(--pr-2); }
.cmpCol.c3 { border-top-color: var(--pr-3); }
.cmpCol .n { font-size: 11.5px; font-weight: 700; color: var(--ink3); }
.cmpCol h2 { margin: 2px 0 6px; font-size: 17px; line-height: 1.3; border: 0; padding: 0; }
.radarWrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  justify-content: center; margin: 8px 0 24px; }
.radar { width: min(420px, 92vw); height: auto; }
.radarLegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 500; }
.radarLegend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px; }

/* ── 表 ───────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 2px solid var(--rule); text-align: left;
  vertical-align: middle; }
thead th { font-size: 12px; color: var(--ink3); font-weight: 700; white-space: nowrap; }
th.axis { font-weight: 500; color: var(--ink2); width: 30%; }
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
td.best { font-weight: 800; }
td .bar { display: block; height: 5px; border-radius: 2px; margin-top: 4px;
  background: var(--pr-grid); }
td .bar i { display: block; height: 100%; border-radius: 2px; }
.na { color: var(--ink3); font-size: 12px; font-weight: 400; }
tr.differs { background: var(--kitchen2); }

/* ── 周辺 ─────────────────────────────────────────── */
.feats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 18px; }
.featsLead { font-size: 13px; color: var(--ink3); font-weight: 500; width: 100%; }
.feat { font-size: 13px; padding: 3px 9px; border-radius: 5px; background: var(--court);
  color: var(--ink2); }
.players { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; }
.plLead { width: 100%; font-size: 13px; font-weight: 700; color: var(--ink3); }
.pl { display: inline-flex; flex-direction: column; gap: 1px; padding: 6px 12px;
  border-radius: 7px; font-size: 14px; font-weight: 700; border: 1.5px solid var(--pr-grid); }
.pl.signature { border-color: var(--drop); color: var(--drop); }
.pl i { font-style: normal; font-size: 11px; font-weight: 500; opacity: .8; }
.plNote { width: 100%; font-size: 12px; color: var(--ink3); line-height: 1.6; }
.whyBox { border-left: 4px solid var(--kitchen); padding: 8px 0 8px 13px; margin: 14px 0; }
.whyBox .whyLead { font-size: 12px; font-weight: 700; color: var(--ink2); }
.whyBox ul { margin: 6px 0 0; padding-left: 18px; }
.whyBox li { font-size: 14px; line-height: 1.7; }
.whyBox .note { margin: 6px 0 0; }
.stockBox { border-left: 4px solid var(--warn); background: var(--line);
  padding: 12px 14px; margin: 14px 0 18px; display: flex; flex-direction: column;
  gap: 4px; font-size: 14px; }
.stockBox.dis { border-left-color: #992a22; }
.stockBox.pre { border-left-color: var(--kitchen); }
.stockBox b { font-size: 15px; }
.stockBox .eta { font-size: 13px; color: var(--ink3); }
.stockBox a { font-size: 13px; font-weight: 700; }
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; margin: 14px 0 24px; }
.map { margin: 0; }
.scatter { width: 100%; height: auto; }
.map figcaption { font-size: 13px; color: var(--ink2); font-weight: 500;
  text-align: center; margin-top: 4px; }
.map .pos { display: block; font-size: 12px; color: var(--drop); font-weight: 700;
  margin-top: 2px; }

/* 広告は読み終えた位置にだけ置く。比較の途中に挟むと判断の邪魔になる */
.ads { margin: 36px 0 0; padding: 16px 0 0; border-top: 2px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.adsLead { width: 100%; font-size: 12px; color: var(--ink3); font-weight: 500; }
.ad { font-size: 13px; line-height: 1.6; }

/* 開示は本文の手前。脚注に回すと読まれない */
.disclose { border-left: 4px solid var(--ink2); background: var(--line);
  padding: 9px 13px; margin: 0 0 14px; font-size: 13px; line-height: 1.6;
  color: var(--ink2); }
.disclose b { color: var(--ink); margin-right: .4em; }

footer.site { border-top: 2px solid var(--rule); margin-top: 48px; padding: 24px 0 92px;
  font-size: 13px; color: var(--ink3); }

main.wrap > h1 { margin-top: 14px; margin-bottom: 8px; }

@media (max-width: 900px) {
  /* ロゴと言語・通貨に挟まれると、語の長い言語でリンクが隠れる。
     ベトナム語とフランス語ではタブレット幅でも最後が見えなかった。
     横スクロールは「隠れている」ことに気づけないので使わない。 */
  header.site .row { flex-wrap: wrap; row-gap: 4px; }
  nav.main { order: 3; width: 100%; margin-left: 0; padding-bottom: 2px;
    flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 640px) {
  header.site .row { padding: 8px 12px; gap: 9px; }
  .brandmark { font-size: 17px; }
  nav.main { gap: 11px; }
  nav.main a { font-size: 13px; }
  .langPick, .curPick { padding: 5px 7px; font-size: 12px; min-height: 34px; }
  h1 { margin: 14px 0 7px; }
  p.lead { font-size: 13.5px; margin-bottom: 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pcard { padding: 10px; }
  .priceLine .pr { font-size: 19px; }
  /* 狭い画面では「Độ dày lõi」が「Độ...」に切れて、何の数字か分からなくなる。
     単位（mm・g）があれば何を指すかは読める。ラベルを落として値を残す。 */
  .pcard .sp i { display: none; }
  .fbtn { font-size: 12px; padding: 5px 10px; min-height: 36px; }
  .fsel span { display: none; }
  .fsel select { max-width: 30vw; }
  .cmpBar .inner { gap: 8px; padding: 8px 12px; }
  .slot { min-width: 0; flex: 1; font-size: 12px; padding: 5px 8px; }
  .cmpGo { width: 100%; margin-left: 0; }
  th, td { padding: 7px 6px; font-size: 13px; }
  th.axis { width: 26%; }
  .disclose { padding: 7px 10px; font-size: 12px; line-height: 1.55; margin-bottom: 12px; }
}
@media (max-width: 600px) {
  .heatRow > .grid { grid-auto-columns: 134px; grid-template-columns: none; }
  .heatRow .pcard h3 { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}