/* 洗剤ずかん しゃぼん玉のデザイン（style.css のあとに読む）。空色の地に白い泡、中身は白い台紙、数字は虹色のふちの玉 */
:root {
  --bg: #E8F4FC; --surface: #FFFFFF; --surface-2: #F1F7FC; --ink: #1B2A3A; --muted: #5A6C7E; --line: #DCE8F2; --line-strong: #BFD3E4;
  --primary: #2F7BD0; --primary-press: #2466B0; --on-primary: #FFFFFF; --primary-soft: #E2EFFB; --primary-ink: #1F62AD;
  --acid: #E34948; --acid2: #F2A3A2; --neu: #CFCCC5; --alk2: #86B6EF; --alk: #2A78D6;
  --iri: conic-gradient(from 210deg, #9fd3ff, #c8b6ff, #ffc2e2, #ffe6a6, #b8f0d8, #9fd3ff);
  --bub: radial-gradient(circle at 32% 26%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.72) 10% 50%, rgba(214,236,255,.62) 51% 100%);
  --sheet-sh: 0 1px 2px rgba(30,70,110,.07), 0 6px 18px rgba(30,70,110,.07);
  --r: 22px; --r-s: 16px;
  --foam-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%2046%27%20preserveAspectRatio%3D%27none%27%3E%3Crect%20width%3D%27360%27%20height%3D%2716%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27-20.0%27%20cy%3D%2714.0%27%20r%3D%2716.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%275.7%27%20cy%3D%2714.4%27%20r%3D%2719.7%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2732.6%27%20cy%3D%2718.1%27%20r%3D%2716.2%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2760.3%27%20cy%3D%2716.3%27%20r%3D%2714.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2790.9%27%20cy%3D%2715.1%27%20r%3D%2715.4%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27119.9%27%20cy%3D%2720.6%27%20r%3D%2715.4%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27142.9%27%20cy%3D%2715.7%27%20r%3D%2718.6%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27172.1%27%20cy%3D%2718.4%27%20r%3D%2716.3%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27196.9%27%20cy%3D%2716.5%27%20r%3D%2719.2%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27219.0%27%20cy%3D%2715.5%27%20r%3D%2717.2%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27249.6%27%20cy%3D%2714.1%27%20r%3D%2715.5%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27282.2%27%20cy%3D%2718.2%27%20r%3D%2712.9%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27311.5%27%20cy%3D%2721.7%27%20r%3D%2714.9%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27344.4%27%20cy%3D%2714.1%27%20r%3D%2718.5%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27376.1%27%20cy%3D%2721.6%27%20r%3D%2714.6%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27-10.0%27%20cy%3D%2734.0%27%20r%3D%2710.7%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2711.3%27%20cy%3D%2735.0%27%20r%3D%279.8%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2729.6%27%20cy%3D%2731.3%27%20r%3D%278.7%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2743.9%27%20cy%3D%2734.8%27%20r%3D%2710.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2761.4%27%20cy%3D%2734.4%27%20r%3D%275.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2782.1%27%20cy%3D%2734.8%27%20r%3D%278.3%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27102.8%27%20cy%3D%2732.5%27%20r%3D%2710.1%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27121.2%27%20cy%3D%2734.6%27%20r%3D%2711.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27139.4%27%20cy%3D%2734.1%27%20r%3D%278.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27155.7%27%20cy%3D%2730.2%27%20r%3D%275.3%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27178.0%27%20cy%3D%2730.5%27%20r%3D%277.1%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27197.5%27%20cy%3D%2731.9%27%20r%3D%277.8%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27212.5%27%20cy%3D%2731.9%27%20r%3D%276.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27232.3%27%20cy%3D%2732.8%27%20r%3D%2710.5%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27247.2%27%20cy%3D%2734.9%27%20r%3D%2711.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27269.0%27%20cy%3D%2732.8%27%20r%3D%277.2%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27291.6%27%20cy%3D%2733.2%27%20r%3D%278.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27308.7%27%20cy%3D%2732.7%27%20r%3D%276.5%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27332.3%27%20cy%3D%2732.8%27%20r%3D%2710.5%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27347.8%27%20cy%3D%2730.8%27%20r%3D%2710.8%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27368.7%27%20cy%3D%2731.4%27%20r%3D%2710.0%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27-20.0%27%20cy%3D%2714.0%27%20r%3D%2715.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%275.7%27%20cy%3D%2714.4%27%20r%3D%2718.7%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2732.6%27%20cy%3D%2718.1%27%20r%3D%2715.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2760.3%27%20cy%3D%2716.3%27%20r%3D%2713.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2790.9%27%20cy%3D%2715.1%27%20r%3D%2714.4%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27119.9%27%20cy%3D%2720.6%27%20r%3D%2714.4%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27142.9%27%20cy%3D%2715.7%27%20r%3D%2717.6%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27172.1%27%20cy%3D%2718.4%27%20r%3D%2715.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27196.9%27%20cy%3D%2716.5%27%20r%3D%2718.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27219.0%27%20cy%3D%2715.5%27%20r%3D%2716.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27249.6%27%20cy%3D%2714.1%27%20r%3D%2714.5%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27282.2%27%20cy%3D%2718.2%27%20r%3D%2711.9%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27311.5%27%20cy%3D%2721.7%27%20r%3D%2713.9%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27344.4%27%20cy%3D%2714.1%27%20r%3D%2717.5%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27376.1%27%20cy%3D%2721.6%27%20r%3D%2713.6%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27-10.0%27%20cy%3D%2734.0%27%20r%3D%279.7%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2711.3%27%20cy%3D%2735.0%27%20r%3D%278.8%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2729.6%27%20cy%3D%2731.3%27%20r%3D%277.7%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2743.9%27%20cy%3D%2734.8%27%20r%3D%279.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2761.4%27%20cy%3D%2734.4%27%20r%3D%274.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2782.1%27%20cy%3D%2734.8%27%20r%3D%277.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27102.8%27%20cy%3D%2732.5%27%20r%3D%279.1%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27121.2%27%20cy%3D%2734.6%27%20r%3D%2710.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27139.4%27%20cy%3D%2734.1%27%20r%3D%277.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27155.7%27%20cy%3D%2730.2%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27178.0%27%20cy%3D%2730.5%27%20r%3D%276.1%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27197.5%27%20cy%3D%2731.9%27%20r%3D%276.8%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27212.5%27%20cy%3D%2731.9%27%20r%3D%275.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27232.3%27%20cy%3D%2732.8%27%20r%3D%279.5%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27247.2%27%20cy%3D%2734.9%27%20r%3D%2710.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27269.0%27%20cy%3D%2732.8%27%20r%3D%276.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27291.6%27%20cy%3D%2733.2%27%20r%3D%277.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27308.7%27%20cy%3D%2732.7%27%20r%3D%275.5%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27332.3%27%20cy%3D%2732.8%27%20r%3D%279.5%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27347.8%27%20cy%3D%2730.8%27%20r%3D%279.8%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27368.7%27%20cy%3D%2731.4%27%20r%3D%279.0%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20width%3D%27360%27%20height%3D%2713%27%20fill%3D%27%23ffffff%27%2F%3E%3Cpath%20d%3D%27M-6.1%2015.3a12.2%2012.2%200%200%201%209.5%20-9.9%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M81.6%2015.9a9.6%209.6%200%200%201%207.4%20-7.7%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M162.3%2019.3a10.1%2010.1%200%200%201%207.8%20-8.2%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M240.3%2014.9a9.6%209.6%200%200%201%207.4%20-7.7%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M333.3%2015.1a11.4%2011.4%200%200%201%208.9%20-9.2%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M114.6%2035.2a6.8%206.8%200%200%201%205.3%20-5.5%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M225.9%2033.3a6.5%206.5%200%200%201%205.1%20-5.3%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M341.3%2031.3a6.7%206.7%200%200%201%205.2%20-5.4%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3C%2Fsvg%3E");
--foam-dots: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%20260%27%3E%3Ccircle%20cx%3D%270.1%27%20cy%3D%27211.8%27%20r%3D%2715.8%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M-8.6%20210.2a9.5%209.5%200%200%201%207.1%20-7.1%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2778.2%27%20cy%3D%27117.1%27%20r%3D%277.9%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2794.7%27%20cy%3D%27178.6%27%20r%3D%2712.8%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M87.7%20177.4a7.7%207.7%200%200%201%205.8%20-5.8%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2727.6%27%20cy%3D%2731.6%27%20r%3D%273.9%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2725.5%27%20cy%3D%270.7%27%20r%3D%2710.7%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M19.6%20-0.4a6.4%206.4%200%200%201%204.8%20-4.8%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2793.9%27%20cy%3D%27120.5%27%20r%3D%276.1%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2731.0%27%20cy%3D%27244.0%27%20r%3D%274.5%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%27238.3%27%20cy%3D%2720.9%27%20r%3D%2716.8%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M229.0%2019.2a10.1%2010.1%200%200%201%207.5%20-7.5%27%20fill%3D%27none%27%20stroke%3D%27%23b9d9ef%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  font-family: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1824; --surface: #15222F; --surface-2: #1B2A39; --ink: #E4EEF7; --muted: #9DB0C2; --line: #24364A; --line-strong: #34506A;
    --primary: #74B6F0; --primary-press: #93C7F3; --on-primary: #0B1620; --primary-soft: #1A3047; --primary-ink: #93C7F3;
    --neu: #6E6B66; --alk2: #4C82BE; --alk: #3D8CE6; --acid2: #B66463;
    --bub: radial-gradient(circle at 32% 26%, rgba(255,255,255,.28) 0 9%, rgba(120,170,220,.16) 10% 50%, rgba(60,110,160,.18) 51% 100%);
    --sheet-sh: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
    --foam-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%2046%27%20preserveAspectRatio%3D%27none%27%3E%3Crect%20width%3D%27360%27%20height%3D%2716%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27-20.0%27%20cy%3D%2714.0%27%20r%3D%2716.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%275.7%27%20cy%3D%2714.4%27%20r%3D%2719.7%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2732.6%27%20cy%3D%2718.1%27%20r%3D%2716.2%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2760.3%27%20cy%3D%2716.3%27%20r%3D%2714.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2790.9%27%20cy%3D%2715.1%27%20r%3D%2715.4%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27119.9%27%20cy%3D%2720.6%27%20r%3D%2715.4%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27142.9%27%20cy%3D%2715.7%27%20r%3D%2718.6%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27172.1%27%20cy%3D%2718.4%27%20r%3D%2716.3%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27196.9%27%20cy%3D%2716.5%27%20r%3D%2719.2%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27219.0%27%20cy%3D%2715.5%27%20r%3D%2717.2%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27249.6%27%20cy%3D%2714.1%27%20r%3D%2715.5%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27282.2%27%20cy%3D%2718.2%27%20r%3D%2712.9%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27311.5%27%20cy%3D%2721.7%27%20r%3D%2714.9%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27344.4%27%20cy%3D%2714.1%27%20r%3D%2718.5%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27376.1%27%20cy%3D%2721.6%27%20r%3D%2714.6%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27-10.0%27%20cy%3D%2734.0%27%20r%3D%2710.7%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2711.3%27%20cy%3D%2735.0%27%20r%3D%279.8%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2729.6%27%20cy%3D%2731.3%27%20r%3D%278.7%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2743.9%27%20cy%3D%2734.8%27%20r%3D%2710.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2761.4%27%20cy%3D%2734.4%27%20r%3D%275.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2782.1%27%20cy%3D%2734.8%27%20r%3D%278.3%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27102.8%27%20cy%3D%2732.5%27%20r%3D%2710.1%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27121.2%27%20cy%3D%2734.6%27%20r%3D%2711.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27139.4%27%20cy%3D%2734.1%27%20r%3D%278.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27155.7%27%20cy%3D%2730.2%27%20r%3D%275.3%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27178.0%27%20cy%3D%2730.5%27%20r%3D%277.1%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27197.5%27%20cy%3D%2731.9%27%20r%3D%277.8%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27212.5%27%20cy%3D%2731.9%27%20r%3D%276.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27232.3%27%20cy%3D%2732.8%27%20r%3D%2710.5%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27247.2%27%20cy%3D%2734.9%27%20r%3D%2711.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27269.0%27%20cy%3D%2732.8%27%20r%3D%277.2%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27291.6%27%20cy%3D%2733.2%27%20r%3D%278.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27308.7%27%20cy%3D%2732.7%27%20r%3D%276.5%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27332.3%27%20cy%3D%2732.8%27%20r%3D%2710.5%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27347.8%27%20cy%3D%2730.8%27%20r%3D%2710.8%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27368.7%27%20cy%3D%2731.4%27%20r%3D%2710.0%27%20fill%3D%27%2316283a%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27-20.0%27%20cy%3D%2714.0%27%20r%3D%2715.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%275.7%27%20cy%3D%2714.4%27%20r%3D%2718.7%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2732.6%27%20cy%3D%2718.1%27%20r%3D%2715.2%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2760.3%27%20cy%3D%2716.3%27%20r%3D%2713.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2790.9%27%20cy%3D%2715.1%27%20r%3D%2714.4%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27119.9%27%20cy%3D%2720.6%27%20r%3D%2714.4%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27142.9%27%20cy%3D%2715.7%27%20r%3D%2717.6%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27172.1%27%20cy%3D%2718.4%27%20r%3D%2715.3%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27196.9%27%20cy%3D%2716.5%27%20r%3D%2718.2%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27219.0%27%20cy%3D%2715.5%27%20r%3D%2716.2%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27249.6%27%20cy%3D%2714.1%27%20r%3D%2714.5%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27282.2%27%20cy%3D%2718.2%27%20r%3D%2711.9%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27311.5%27%20cy%3D%2721.7%27%20r%3D%2713.9%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27344.4%27%20cy%3D%2714.1%27%20r%3D%2717.5%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27376.1%27%20cy%3D%2721.6%27%20r%3D%2713.6%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27-10.0%27%20cy%3D%2734.0%27%20r%3D%279.7%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2711.3%27%20cy%3D%2735.0%27%20r%3D%278.8%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2729.6%27%20cy%3D%2731.3%27%20r%3D%277.7%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2743.9%27%20cy%3D%2734.8%27%20r%3D%279.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2761.4%27%20cy%3D%2734.4%27%20r%3D%274.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%2782.1%27%20cy%3D%2734.8%27%20r%3D%277.3%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27102.8%27%20cy%3D%2732.5%27%20r%3D%279.1%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27121.2%27%20cy%3D%2734.6%27%20r%3D%2710.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27139.4%27%20cy%3D%2734.1%27%20r%3D%277.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27155.7%27%20cy%3D%2730.2%27%20r%3D%274.3%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27178.0%27%20cy%3D%2730.5%27%20r%3D%276.1%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27197.5%27%20cy%3D%2731.9%27%20r%3D%276.8%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27212.5%27%20cy%3D%2731.9%27%20r%3D%275.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27232.3%27%20cy%3D%2732.8%27%20r%3D%279.5%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27247.2%27%20cy%3D%2734.9%27%20r%3D%2710.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27269.0%27%20cy%3D%2732.8%27%20r%3D%276.2%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27291.6%27%20cy%3D%2733.2%27%20r%3D%277.0%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27308.7%27%20cy%3D%2732.7%27%20r%3D%275.5%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27332.3%27%20cy%3D%2732.8%27%20r%3D%279.5%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27347.8%27%20cy%3D%2730.8%27%20r%3D%279.8%27%20fill%3D%27%2316283a%27%2F%3E%3Ccircle%20cx%3D%27368.7%27%20cy%3D%2731.4%27%20r%3D%279.0%27%20fill%3D%27%2316283a%27%2F%3E%3Crect%20width%3D%27360%27%20height%3D%2713%27%20fill%3D%27%2316283a%27%2F%3E%3Cpath%20d%3D%27M-6.1%2015.3a12.2%2012.2%200%200%201%209.5%20-9.9%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M81.6%2015.9a9.6%209.6%200%200%201%207.4%20-7.7%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M162.3%2019.3a10.1%2010.1%200%200%201%207.8%20-8.2%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M240.3%2014.9a9.6%209.6%200%200%201%207.4%20-7.7%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M333.3%2015.1a11.4%2011.4%200%200%201%208.9%20-9.2%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M114.6%2035.2a6.8%206.8%200%200%201%205.3%20-5.5%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M225.9%2033.3a6.5%206.5%200%200%201%205.1%20-5.3%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M341.3%2031.3a6.7%206.7%200%200%201%205.2%20-5.4%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3C%2Fsvg%3E");
--foam-dots: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%20260%27%3E%3Ccircle%20cx%3D%270.1%27%20cy%3D%27211.8%27%20r%3D%2715.8%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M-8.6%20210.2a9.5%209.5%200%200%201%207.1%20-7.1%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2778.2%27%20cy%3D%27117.1%27%20r%3D%277.9%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2794.7%27%20cy%3D%27178.6%27%20r%3D%2712.8%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M87.7%20177.4a7.7%207.7%200%200%201%205.8%20-5.8%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2727.6%27%20cy%3D%2731.6%27%20r%3D%273.9%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2725.5%27%20cy%3D%270.7%27%20r%3D%2710.7%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M19.6%20-0.4a6.4%206.4%200%200%201%204.8%20-4.8%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2793.9%27%20cy%3D%27120.5%27%20r%3D%276.1%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2731.0%27%20cy%3D%27244.0%27%20r%3D%274.5%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%27238.3%27%20cy%3D%2720.9%27%20r%3D%2716.8%27%20fill%3D%27%2316283a%27%20fill-opacity%3D%27.5%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M229.0%2019.2a10.1%2010.1%200%200%201%207.5%20-7.5%27%20fill%3D%27none%27%20stroke%3D%27%232f4d6b%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  }
}
body { background-color: var(--bg); background-image: var(--foam-dots); background-size: 260px 260px; background-attachment: fixed; }
h1, h2, h3, .logo, .nm, .bb b { font-feature-settings: "palt"; }

/* 上の帯とヘッダー：白い泡の下の縁がもこもこ */
.pr { background: var(--surface); }
.hd { background: var(--surface); border-bottom: 0; }
.hd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: var(--foam-edge) top center / 360px 22px repeat-x; pointer-events: none; }
.logo .mk { border-radius: 50%; background: var(--bub); color: var(--primary); position: relative; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9); }
.logo .mk::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; padding: 2px; background: var(--iri); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
main { padding-top: 14px; }
.crumbs { margin-top: 6px; }

/* しゃぼん玉（数字を入れる丸） */
.bb { position: relative; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--bub); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 4px 14px rgba(40,100,160,.12); color: var(--ink); text-decoration: none; line-height: 1.15; }
.bb::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2.5px; background: var(--iri); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.bb small { display: block; font-size: .66rem; color: var(--muted); font-weight: 700; }
.bb b { font-weight: 800; font-variant-numeric: tabular-nums; }
.bb b em { font-style: normal; font-size: .55em; margin-left: 1px; }

/* 台紙 */
.sec, .card, .row, .tile, .door, .quiz, .r, .toc { background: var(--surface); border: 0; box-shadow: var(--sheet-sh); }
.card, .quiz { border-radius: var(--r); }
.tile, .door { border-radius: var(--r-s); }
.btn { border-radius: 999px; }
.btn.primary { box-shadow: 0 4px 12px rgba(47,123,208,.28); }
.chip { border-radius: 999px; }
.note { border-radius: var(--r-s); }

/* ===== 商品ページ ===== */
.pb { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 18px; }
.sec { border-radius: var(--r); padding: 14px 14px 16px; position: relative; scroll-margin-top: 70px; }
.sec .sh { display: flex; align-items: center; gap: 6px; font-size: 1rem; margin: 0 0 10px; }
.sec .sh .ic { color: var(--primary); width: 20px; height: 20px; }
.sec .sh small { font-size: .72rem; color: var(--muted); font-weight: 500; margin-left: auto; }
.sh3 { font-size: .9rem; margin: 14px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sh3 small { font-size: .7rem; color: var(--muted); font-weight: 500; }
/* 並び（何も選ばずに来たとき） */
.sec-head { order: 0; } .sec-quick { order: 1; } .sec-buy { order: 2; } .sec-ing { order: 3; } .sec-cost { order: 4; } .sec-surf { order: 5; } .sec-amount { order: 6; } .sec-ph { order: 7; } .sec-label { order: 8; } .sec-acts { order: 9; }
.sec-head { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; }
.sec-head h1 { font-size: 1.22rem; margin: 2px 0 2px; line-height: 1.35; overflow-wrap: anywhere; }
.sec-head .mk { font-size: .8rem; color: var(--muted); }
.sec-head .no { font: 700 .72rem/1 ui-monospace, Menlo, monospace; color: var(--primary-ink); background: var(--primary-soft); padding: 3px 7px; border-radius: 999px; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pill { font-size: .72rem; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
a.pill { color: var(--primary-ink); }
.ph-big .ph-frame { width: 116px; height: 116px; }
.ph-frame { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ph-frame img { width: 100%; height: 100%; object-fit: contain; }
.ph-frame.none img { width: 78%; height: 78%; opacity: .9; }
.ph-frame.none small { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: .55rem; color: #6b7c8d; background: rgba(255,255,255,.85); }
.ph-big .ph-frame.none small { font-size: .65rem; bottom: 6px; }
.sec-quick { display: flex; justify-content: space-around; gap: 6px; padding: 12px 6px; }
.sec-quick .q { width: 78px; height: 78px; }
.sec-quick .q b { font-size: 1.02rem; }
.sec-quick .q b.t { font-size: .76rem; display: inline-flex; align-items: center; gap: 3px; }
.sec-buy { padding: 10px 12px; }
.sec-buy .buy { margin: 0; }
.buy-note { font-size: .7rem; color: var(--muted); margin: 6px 2px 0; text-align: right; }
/* 値段 */
.cost-hero { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.cost-hero .main { width: 128px; height: 128px; }
.cost-hero .main b { font-size: 2.2rem; color: var(--ink); }
.cost-hero .main span { font-size: .62rem; color: var(--muted); }
.sats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: center; }
.sat { width: 76px; height: 76px; }
.sat b { font-size: .92rem; }
.sat span { font-size: .58rem; color: var(--muted); }
.vsmed { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: .8rem; }
.vrow { display: grid; grid-template-columns: 7.2em 1fr 3.6em; gap: 8px; align-items: center; margin: 3px 0; }
.vrow .vb { height: 10px; border-radius: 0 6px 6px 0; background: var(--line-strong); overflow: hidden; }
.vrow .vb i { display: block; height: 100%; background: var(--muted); opacity: .45; border-radius: 0 6px 6px 0; }
.vrow.me .vb i { background: var(--primary); opacity: 1; }
.vrow b { text-align: right; font-variant-numeric: tabular-nums; }
.vsmed p { margin: 6px 0 0; }
.sizes { display: flex; align-items: flex-end; justify-content: space-around; gap: 4px; flex-wrap: wrap; }
.sz { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--ink); font-size: .7rem; }
.sz .bb { font-size: .7rem; font-weight: 800; }
.sz b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.sz small { color: var(--muted); font-size: .64rem; }
.sz.best b { color: var(--primary-ink); }
.sz.best .bb::after { content: "最安"; position: absolute; top: -6px; right: -10px; font-size: .58rem; font-weight: 800; color: #fff; background: var(--primary); padding: 0 6px; border-radius: 999px; }
.rcpt { margin-top: 12px; }
.rcpt summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--primary-ink); display: flex; align-items: center; gap: 6px; padding: 6px 0; list-style: none; }
.rcpt summary::-webkit-details-marker { display: none; }
.rcpt .paper { position: relative; background: #fff; color: #1b2a3a; margin: 6px 4px 12px; padding: 12px 14px 16px; font: 400 .78rem/1.7 "BIZ UDGothic", ui-monospace, Menlo, monospace; box-shadow: 0 2px 6px rgba(20,40,60,.12); }
.rcpt .paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 6px, #fff 0) 0 0 / 12px 8px repeat-x, linear-gradient(45deg, transparent 6px, #fff 0) 0 0 / 12px 8px repeat-x; }
.rcpt .ttl { text-align: center; font-weight: 700; letter-spacing: .2em; }
.rcpt .sub { text-align: center; font-size: .66rem; color: #5a6c7e; line-height: 1.5; }
.rcpt hr { border: 0; border-top: 1.5px dashed #9aa8b6; margin: 6px 0; }
.rcpt .ln { display: flex; gap: 4px; align-items: baseline; }
.rcpt .ln span { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpt .ln i { flex: 1; border-bottom: 1.5px dotted #b9c4cf; transform: translateY(-3px); }
.rcpt .ln b { font-variant-numeric: tabular-nums; }
.rcpt .tot { background: #fff4b8; margin: 0 -6px; padding: 0 6px; font-size: .95rem; }
.rcpt .tot b { font-size: 1.15rem; }
/* 入っているもの */
.ings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; }
.sec-ing .bd { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: .7rem; line-height: 1.2; }
.bd .c { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.bd .c .ic { width: 22px; height: 22px; }
.bd.on .c { background: radial-gradient(circle at 32% 26%, #7a8ca3 0 9%, var(--ink) 10% 100%); color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #c8b6ff; }
.bd.off .c { border: 1.5px dashed var(--line-strong); color: #9db0c2; background: var(--surface); }
.bd.off { color: var(--muted); }
.bd.unk .c { background: var(--surface-2); color: #9db0c2; border: 1.5px solid var(--line); }
.bd .ex { display: none; }
.key { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: .66rem; color: var(--muted); margin-top: 10px; }
.key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; vertical-align: -1px; }
.key .k1 { background: var(--ink); } .key .k2 { border: 1.2px dashed var(--line-strong); } .key .k3 { background: var(--surface-2); border: 1.2px solid var(--line); }
/* 界面活性剤・量 */
.surf-row, .amt { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.big1 { width: 96px; height: 96px; }
.big1 b { font-size: 1.7rem; }
.meter2 { position: relative; height: 12px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.meter2 .band { position: absolute; top: 0; bottom: 0; background: var(--line-strong); opacity: .6; }
.meter2 .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary); border-radius: 999px; }
.meter2 .med { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--muted); }
.mcap { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); margin-top: 3px; }
.surf-m .g { margin: 8px 0 0; font-size: .82rem; }
.ions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ion { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; border: 1px solid var(--line); overflow-wrap: anywhere; }
.ion b { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 .8rem/1 ui-monospace, Menlo, monospace; }
.calc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.calc button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 700; }
.calc button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.calc output { font-weight: 800; font-size: 1.15rem; margin-left: 4px; }
.calc output::before { content: "→ "; color: var(--muted); font-weight: 400; }
/* 液性の目盛り */
.phm { position: relative; padding-top: 26px; }
.phm .segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 12px; }
.phm .segs i { border-radius: 3px; }
.phm .segs i:nth-child(1), .ekd.ek0 { background: var(--acid); } .phm .segs i:nth-child(2), .ekd.ek1 { background: var(--acid2); } .phm .segs i:nth-child(3), .ekd.ek2 { background: var(--neu); } .phm .segs i:nth-child(4), .ekd.ek3 { background: var(--alk2); } .phm .segs i:nth-child(5), .ekd.ek4 { background: var(--alk); }
.phm .pin { position: absolute; top: 0; transform: translateX(-50%); font-size: .76rem; font-weight: 800; white-space: nowrap; background: var(--ink); color: var(--surface); padding: 1px 9px; border-radius: 999px; }
.phm .pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.phm .ends { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted); margin-top: 3px; }
.ekd { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* ラベル */
.lbl summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; list-style: none; }
.lbl summary::-webkit-details-marker { display: none; }
.lbl summary::after { content: "＋"; margin-left: auto; color: var(--muted); }
.lbl[open] summary::after { content: "−"; }
.sec-label .src { margin: 10px 0 0; display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; }
.sec-label .src .ic { color: var(--muted); margin-top: 3px; }
.sec-acts { padding: 10px 12px; }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.acts .btn { padding: 0 6px; font-size: .78rem; }

/* ===== 入ってきた道で大きく見せる（<html data-focus>）===== */
html[data-focus] .sec-quick { display: none; }
html[data-focus="cost"] .sec-cost, html[data-focus="surf"] .sec-surf, html[data-focus="amount"] .sec-amount, html[data-focus="ph"] .sec-ph,
html[data-focus="fluor"] .sec-ing, html[data-focus="enzyme"] .sec-ing, html[data-focus="bleach"] .sec-ing, html[data-focus="softening"] .sec-ing,
html[data-focus="fragrance"] .sec-ing, html[data-focus="color"] .sec-ing, html[data-focus="preservative"] .sec-ing, html[data-focus="antibac"] .sec-ing { order: 1; box-shadow: 0 0 0 2px var(--primary-soft), var(--sheet-sh); }
html[data-focus="cost"] .sec-buy { order: 2; }
html[data-focus="cost"] .cost-hero { grid-template-columns: 1fr; justify-items: center; }
html[data-focus="cost"] .cost-hero .main { width: 168px; height: 168px; }
html[data-focus="cost"] .cost-hero .main b { font-size: 3rem; }
html[data-focus="cost"] .sats { grid-template-columns: repeat(4, 1fr); width: 100%; }
html[data-focus="cost"] .sat { width: 74px; height: 74px; }
html[data-focus="surf"] .sec-surf .big1, html[data-focus="amount"] .sec-amount .big1 { width: 128px; height: 128px; }
html[data-focus="surf"] .sec-surf .big1 b, html[data-focus="amount"] .sec-amount .big1 b { font-size: 2.3rem; }
html[data-focus="ph"] .phm .segs { height: 18px; }
html[data-focus="ph"] .phm .pin { font-size: .95rem; }
/* 選んだ成分の玉を大きく、説明を出す */
html[data-focus="fluor"] .bd[data-k="fluor"], html[data-focus="enzyme"] .bd[data-k="enzyme"], html[data-focus="bleach"] .bd[data-k="bleach"], html[data-focus="softening"] .bd[data-k="softening"],
html[data-focus="fragrance"] .bd[data-k="fragrance"], html[data-focus="color"] .bd[data-k="color"], html[data-focus="preservative"] .bd[data-k="preservative"], html[data-focus="antibac"] .bd[data-k="antibac"] {
  order: -1; grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); margin-bottom: 4px; font-size: .9rem; }
html[data-focus="fluor"] .bd[data-k="fluor"] .c, html[data-focus="enzyme"] .bd[data-k="enzyme"] .c, html[data-focus="bleach"] .bd[data-k="bleach"] .c, html[data-focus="softening"] .bd[data-k="softening"] .c,
html[data-focus="fragrance"] .bd[data-k="fragrance"] .c, html[data-focus="color"] .bd[data-k="color"] .c, html[data-focus="preservative"] .bd[data-k="preservative"] .c, html[data-focus="antibac"] .bd[data-k="antibac"] .c { width: 72px; height: 72px; grid-row: span 2; }
html[data-focus="fluor"] .bd[data-k="fluor"] .ex, html[data-focus="enzyme"] .bd[data-k="enzyme"] .ex, html[data-focus="bleach"] .bd[data-k="bleach"] .ex, html[data-focus="softening"] .bd[data-k="softening"] .ex,
html[data-focus="fragrance"] .bd[data-k="fragrance"] .ex, html[data-focus="color"] .bd[data-k="color"] .ex, html[data-focus="preservative"] .bd[data-k="preservative"] .ex, html[data-focus="antibac"] .bd[data-k="antibac"] .ex { display: block; font-size: .78rem; color: var(--muted); line-height: 1.5; }
html[data-focus] .bd .ex b { display: block; font-size: 1rem; color: var(--ink); }
html[data-focus="fluor"] .bd[data-k="fluor"] .l, html[data-focus="enzyme"] .bd[data-k="enzyme"] .l, html[data-focus="bleach"] .bd[data-k="bleach"] .l, html[data-focus="softening"] .bd[data-k="softening"] .l,
html[data-focus="fragrance"] .bd[data-k="fragrance"] .l, html[data-focus="color"] .bd[data-k="color"] .l, html[data-focus="preservative"] .bd[data-k="preservative"] .l, html[data-focus="antibac"] .bd[data-k="antibac"] .l { display: none; }
html[data-focus="fluor"] .bd[data-k="fluor"] .c .ic, html[data-focus="enzyme"] .bd[data-k="enzyme"] .c .ic, html[data-focus="bleach"] .bd[data-k="bleach"] .c .ic, html[data-focus="softening"] .bd[data-k="softening"] .c .ic,
html[data-focus="fragrance"] .bd[data-k="fragrance"] .c .ic, html[data-focus="color"] .bd[data-k="color"] .c .ic, html[data-focus="preservative"] .bd[data-k="preservative"] .c .ic, html[data-focus="antibac"] .bd[data-k="antibac"] .c .ic { width: 34px; height: 34px; }

/* ===== 一覧の行 ===== */
.rs { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.r { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-s); }
.r-body { min-width: 0; }
.r .nm { display: block; color: var(--ink); text-decoration: none; font-weight: 800; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.r .br { display: block; font-size: .72rem; color: var(--muted); }
.r-ic { display: flex; gap: 4px; margin-top: 5px; }
.mi { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.mi .ic { width: 12px; height: 12px; }
.mi.on { background: var(--ink); color: var(--surface); }
.mi.off { border: 1.2px dashed var(--line-strong); color: #9db0c2; }
.mi.unk { background: var(--surface-2); color: #9db0c2; border: 1.2px solid var(--line); }
.mi.hit { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary); }
.r-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.sub-ek { display: inline-flex; align-items: center; gap: 3px; }
.mbar { display: block; height: 5px; margin-top: 5px; max-width: 160px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.r-big { width: 68px; height: 68px; flex: none; }
.r-big b { font-size: 1.1rem; }
.r .prmark { margin-right: 4px; }
.rs.paged > li:nth-child(n+41) { display: none; }
.more { text-align: center; }
/* 行の古い形（app.js の画面で作る行が移りきるまで） */
.row { border-radius: var(--r-s); }
.thumb { border-radius: 16px; background: #fff; }

/* ===== 入口・タイル ===== */
.door .ill, .tile .ill { mix-blend-mode: multiply; }
.door.main { background: linear-gradient(135deg, #4a93dd, #2f7bd0); }
.door.main .ill { mix-blend-mode: normal; border-radius: 50%; }
.tabs { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); }
.tabs a[aria-current="page"] .ic { background: var(--bub); box-shadow: inset 0 0 0 1.5px #c8b6ff; }
.search input { border-radius: 999px; border-width: 2px; }
.seg span { border-radius: 999px; }
.quiz .opt { border-radius: var(--r-s); }
.ft { background: var(--surface); }
@media (max-width: 380px) { .sec-head { grid-template-columns: 96px 1fr; } .ph-big .ph-frame { width: 96px; height: 96px; } .sat { width: 68px; height: 68px; } .cost-hero .main { width: 112px; height: 112px; } .sec-quick .q { width: 70px; height: 70px; } }
@media (prefers-color-scheme: dark) {
  .ph-frame, .rcpt .paper { background: #fff; }
  .bd.on .c { background: radial-gradient(circle at 32% 26%, #cfe0f2 0 9%, #e4eef7 10% 100%); color: #15222f; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #8e7fd9; }
  .key .k1, .mi.on, .ion b { background: #e4eef7; color: #15222f; }
  .door .ill, .tile .ill { mix-blend-mode: normal; }
}

/* 購入ボタンは3つ横並び（最初の画面に収める） */
.sec-buy .buy { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sec-buy .btn { min-height: 44px; padding: 0 6px; font-size: .8rem; }

/* ===== トップ ===== */
.hero-i .ill { border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #d9c9ff, 0 8px 24px rgba(40,100,160,.16); }
.hero-t .lead { font-size: .92rem; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 6px; }
.kind { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 12px; border-radius: var(--r-s); background: var(--surface); box-shadow: var(--sheet-sh); color: var(--ink); text-decoration: none; text-align: center; }
.kind .ill { width: 72px; height: 72px; mix-blend-mode: multiply; }
.kind b { font-size: .86rem; } .kind span { font-size: .7rem; color: var(--muted); }
.sh2 { font-size: 1.05rem; margin: 22px 0 8px; }
.scenes { display: grid; gap: 8px; }
.scene { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface); box-shadow: var(--sheet-sh); }
.scene .ill { width: 64px; height: 64px; mix-blend-mode: multiply; }
.scene b { font-size: .95rem; }
.scene .q { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.scene .q a { font-size: .74rem; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--primary-ink); text-decoration: none; border: 1px solid var(--line); }
.conds2 { display: flex; flex-wrap: wrap; gap: 6px; }
.cond { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--sheet-sh); }
.cond .ic { color: var(--primary); width: 16px; height: 16px; }
.cond em { font-style: normal; font-size: .7rem; color: var(--muted); }
.ekd.none { border: 1.5px solid var(--line-strong); }
@media (prefers-color-scheme: dark) { .kind .ill, .scene .ill { mix-blend-mode: normal; border-radius: 12px; } }

/* ===== ブランドの「種類ごとの違い」 ===== */
.bm { background: var(--surface); border-radius: var(--r); box-shadow: var(--sheet-sh); padding: 12px 12px 10px; margin: 14px 0; }
.bm h2 { margin: 0 0 8px; font-size: 1rem; }
.bm-conds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bm-conds button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px 0 9px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: .8rem; }
.bm-conds button .ic { width: 15px; height: 15px; }
.bm-conds button em { font-style: normal; font-size: .7rem; opacity: .7; }
.bm-conds button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.mx-wrap { overflow-x: auto; margin: 0 -4px; }
.mx { width: 100%; border-collapse: collapse; font-size: .78rem; }
.mx th, .mx td { border-top: 1px solid var(--line); padding: 7px 4px; text-align: center; vertical-align: middle; }
.mx thead th { border-top: 0; font-size: .64rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.mx thead th .ic { display: block; margin: 0 auto 1px; width: 15px; height: 15px; color: var(--ink); }
.mx tbody th { text-align: left; font-weight: 700; line-height: 1.35; min-width: 9em; }
.mx tbody th a { color: var(--ink); text-decoration: none; }
.mx .mini { display: block; width: 44px; height: 6px; margin: 0 auto 2px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.mx .mini i { display: block; height: 100%; background: var(--primary); }
.mx .b { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: .6rem; color: var(--muted); }
.mx .b.on { background: var(--ink); } .mx .b.off { border: 1.5px dashed var(--line-strong); } .mx .b.unk { background: var(--surface-2); border: 1px solid var(--line); }
.mx tr.dim > * { opacity: .28; }
@media (prefers-color-scheme: dark) { .mx .b.on { background: #e4eef7; } }
/* 合う洗剤の理由は、良し悪しに見えない色で */
.why span { background: var(--primary-soft); color: var(--primary-ink); }
/* 値が無い商品の玉は「—」をうすく。棒の場所はそろえておく */
.r-big.none { opacity: .55; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9); }
.r-big.none::before { opacity: .45; }
.r-big.none b { color: var(--muted); }
.mbar.nobar { background: transparent; }