{"id":3562,"date":"2024-05-21T17:41:23","date_gmt":"2024-05-21T08:41:23","guid":{"rendered":"https:\/\/milky-selections.com\/mirable\/?page_id=3562"},"modified":"2026-07-21T08:45:27","modified_gmt":"2026-07-20T23:45:27","slug":"item_hikaku","status":"publish","type":"page","link":"https:\/\/milky-selections.com\/mirable\/item_hikaku","title":{"rendered":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868"},"content":{"rendered":"<div id=\"pl-3562\"  class=\"panel-layout\" ><div id=\"pg-3562-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-3562-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-3562-0-0-0\" class=\"widget_text so-panel widget widget_custom_html panel-first-child panel-last-child\" data-index=\"0\" ><div class=\"textwidget custom-html-widget\"><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/18.2.0\/umd\/react.production.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-dom\/18.2.0\/umd\/react-dom.production.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/7.24.7\/babel.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script>\r\n  \/\/ Tailwind\u306e\u300cPreflight\u300d\uff08\u30da\u30fc\u30b8\u5168\u4f53\u306e\u30d6\u30e9\u30a6\u30b6\u6a19\u6e96\u30b9\u30bf\u30a4\u30eb\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u6a5f\u80fd\uff09\u3092\u7121\u52b9\u5316\u3002\r\n  \/\/ \u3053\u308c\u3092\u6709\u52b9\u306e\u307e\u307e\u306b\u3059\u308b\u3068\u3001\u6bd4\u8f03\u8868\u306e\u5916\u5074\uff08\u30b5\u30a4\u30c8\u306e\u30d8\u30c3\u30c0\u30fc\u3084\u4ed6\u306e\u8981\u7d20\uff09\u307e\u3067\r\n  \/\/ \u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u5d29\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3001\u6bd4\u8f03\u8868\u306e\u30b9\u30bf\u30a4\u30eb\u3060\u3051\u3092\u4f7f\u3046\u3088\u3046\u306b\u3059\u308b\u3002\r\n  tailwind.config = {\r\n    corePlugins: {\r\n      preflight: false,\r\n    },\r\n  };\r\n<\/script>\r\n<style>\r\n  \/* \u30da\u30fc\u30b8\u5168\u4f53(html, body)\u306b\u306f\u5f71\u97ff\u3055\u305b\u305a\u3001\u6bd4\u8f03\u8868\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u306e\u4e2d\u3060\u3051\u306b\u9069\u7528\u3059\u308b *\/\r\n  #mirable-spec-widget { background: none; }\r\n  #mirable-spec-widget ::-webkit-scrollbar { height: 10px; width: 10px; }\r\n  #mirable-spec-widget ::-webkit-scrollbar-thumb { background: #C4CBCC; border-radius: 8px; }\r\n  #mirable-spec-widget ::-webkit-scrollbar-track { background: transparent; }\r\n\r\n  \/* Tailwind \u306e Preflight \u3092\u7121\u52b9\u5316\u3057\u305f\u5206\u3001\u30dc\u30bf\u30f3\u306e\u898b\u305f\u76ee\u304c\r\n     \u30d6\u30e9\u30a6\u30b6\u6a19\u6e96\u306b\u623b\u3089\u306a\u3044\u3088\u3046\u3001\u6bd4\u8f03\u8868\u306e\u4e2d\u3060\u3051\u306b\u6700\u5c0f\u9650\u306e\u30ea\u30bb\u30c3\u30c8\u3092\u304b\u3051\u308b *\/\r\n  #mirable-spec-widget button {\r\n    font-family: inherit;\r\n    font-size: 100%;\r\n    margin: 0;\r\n    color: inherit;\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    box-shadow: none;\r\n  }\r\n  \/* \u30dc\u30bf\u30f3\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u6642\uff08\u30af\u30ea\u30c3\u30af\u30fb\u30bf\u30d6\u79fb\u52d5\u6642\uff09\u306e\u307f\u3001\r\n     \u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u306e\u305f\u3081\u8584\u3044\u30ea\u30f3\u30b0\u3092\u6b8b\u3059 *\/\r\n  #mirable-spec-widget button:focus-visible {\r\n    outline: 2px solid var(--spec-accent);\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  \/* \u300c\u3059\u3079\u3066\u89e3\u9664\u300d\u30dc\u30bf\u30f3\uff1a\u80cc\u666f\u306b\u8fd1\u3044\u8584\u3044\u7e01 + \u3075\u3093\u308f\u308a\u3057\u305f\u5f71\u3067\u3001\r\n     \u5c11\u3057\u6d6e\u304d\u51fa\u3066\u3044\u308b\u3088\u3046\u306a\u898b\u305f\u76ee\u306b\u3059\u308b *\/\r\n  #mirable-spec-widget .spec-clear-all-btn,\r\n  #mirable-spec-widget .spec-grid-card {\r\n    background: #FFFFFF;\r\n    border: 1px solid #ECEEED;\r\n    box-shadow: 0 1px 1px rgba(16, 24, 22, 0.08), 0 1px 1px rgba(16, 24, 22, 0.05);\r\n  }\r\n  #mirable-spec-widget .spec-clear-all-btn:hover,\r\n  #mirable-spec-widget .spec-grid-card:hover {\r\n    border-color: var(--spec-accent);\r\n    box-shadow: 0 2px 2px rgba(16, 24, 22, 0.10), 0 1px 1px rgba(16, 24, 22, 0.06);\r\n  }\r\n  #mirable-spec-widget .spec-clear-all-btn:disabled {\r\n    box-shadow: none;\r\n  }\r\n  \/* \u9078\u629e\u4e2d\u306e\u5546\u54c1\u30ab\u30fc\u30c9\u306f\u80cc\u666f\u8272(\u30a2\u30af\u30bb\u30f3\u30c8\u30ab\u30e9\u30fc)\u304c\u4ed8\u304f\u306e\u3067\u3001\r\n     \u8584\u3044\u5883\u754c\u7dda\u306f\u4e0d\u8981 \u2192 \u900f\u660e\u306b\u3059\u308b\uff08\u5f71\u306f\u6b8b\u3059\uff09 *\/\r\n  #mirable-spec-widget .spec-grid-card.spec-grid-card--selected {\r\n    border-color: transparent;\r\n  }\r\n  #mirable-spec-widget img {\r\n    max-width: 100%;\r\n    height: auto;\r\n    display: block;\r\n  }\r\n\r\n  \/* ==========================================================\r\n     \u6bd4\u8f03\u8868\uff08\u30c6\u30fc\u30d6\u30eb\uff09\u306eCSS \u2015 \u3053\u3053\u3092\u81ea\u7531\u306b\u8abf\u6574\u3057\u3066\u304f\u3060\u3055\u3044\r\n     ========================================================== *\/\r\n  :root {\r\n    --spec-accent: #0E6E76;              \/* \u30a2\u30af\u30bb\u30f3\u30c8\u30ab\u30e9\u30fc *\/\r\n    --spec-border-color: #E3E6E1;        \/* \u5916\u67a0\u30fb\u30d8\u30c3\u30c0\u30fc\u7f6b\u7dda\u306e\u8272 *\/\r\n    --spec-border-color-light: #EDEFEA;  \/* \u884c\u306e\u7f6b\u7dda\u306e\u8272\uff08\u8584\u3081\uff09 *\/\r\n    --spec-header-bg: #F0F2F2;           \/* \u30d8\u30c3\u30c0\u30fc\u884c\u30fb\u5de6\u4e0a\u30bb\u30eb\u306e\u80cc\u666f\u8272 *\/\r\n    --spec-row-bg: #FFFFFF;              \/* \u5076\u6570\u884c\u306e\u80cc\u666f\u8272 *\/\r\n    --spec-row-alt-bg: #FAFBFB;          \/* \u5947\u6570\u884c\u306e\u80cc\u666f\u8272\uff08\u7e1e\u3005\u7528\uff09 *\/\r\n    \/* \u5217\u5e45\uff08--spec-label-col-width \u76f8\u5f53\uff09\u306f\u3001\u4e0b\u306e<script>\u5185\u306e\r\n       LABEL_COL_WIDTH \/ DEVICE_COL_WIDTH \u3068\u3044\u3046\u5b9a\u6570\u3067\u7ba1\u7406\u3057\u3066\u3044\u307e\u3059\u3002\r\n       \u5217\u5e45\u3092\u5909\u3048\u305f\u3044\u5834\u5408\u306f\u305d\u3061\u3089\u306e\u6570\u5024\u3092\u7de8\u96c6\u3057\u3066\u304f\u3060\u3055\u3044\u3002 *\/\r\n    --spec-table-height: 550px;          \/* \u6bd4\u8f03\u8868\u306e\u9ad8\u3055\uff08\u3053\u306e\u4e2d\u3067\u7e26\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\uff09 *\/\r\n    --spec-table-radius: 0px;            \/* \u6bd4\u8f03\u8868\u306e\u89d2\u4e38\uff080=\u89d2\u4e38\u306a\u3057\uff09 *\/\r\n    --spec-cell-padding-x: 16px;         \/* \u30bb\u30eb\u306e\u5de6\u53f3\u4f59\u767d *\/\r\n    --spec-cell-padding-y: 12px;         \/* \u30bb\u30eb\u306e\u4e0a\u4e0b\u4f59\u767d *\/\r\n    --spec-cell-font-size: 12.5px;       \/* \u30c7\u30fc\u30bf\u30bb\u30eb\u306e\u6587\u5b57\u30b5\u30a4\u30ba *\/\r\n    --spec-label-font-size: 12px;        \/* \u9805\u76ee\u540d\u306e\u6587\u5b57\u30b5\u30a4\u30ba *\/\r\n    --spec-font-jp: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;\r\n    --spec-font-number: 'Poppins', var(--spec-font-jp);\r\n  }\r\n\r\n  \/* \u8868\u5168\u4f53\u306e\u30d5\u30a9\u30f3\u30c8\u3092Noto Sans JP\u306b\u7d71\u4e00 *\/\r\n  #mirable-spec-widget {\r\n    font-family: var(--spec-font-jp) !important;\r\n  }\r\n\r\n  \/* \u300c\u4fa1\u683c\u300d\u300c\u7bc0\u6c34\u6a5f\u80fd\u300d\u306e\u6570\u5b57\u3092\u5927\u304d\u304f\u30fb\u592a\u304f\u3001Poppins\u3067\u5f37\u8abf\u8868\u793a\u3002\r\n     \u6570\u5b57(digit)\u90e8\u5206\u3060\u3051\u3092\u3055\u3089\u306b\u5927\u304d\u304f\u3057\u3001\u300c\u7d04\u300d\u300c\uff05\u300d\u300c\uffe5\u300d\u306a\u3069\u306e\r\n     \u5358\u4f4d\u30fb\u8a18\u53f7(unit)\u90e8\u5206\u306f\u5c11\u3057\u63a7\u3048\u3081\u306a\u30b5\u30a4\u30ba\u306b\u3059\u308b\u3002 *\/\r\n  #mirable-spec-widget .spec-number {\r\n    \/* font-family: var(--spec-font-number); *\/\r\n    color: inherit;\r\n    letter-spacing: 0.01em;\r\n  }\r\n  #mirable-spec-widget .spec-number-digit {\r\n    font-weight: 700;\r\n  }\r\n  #mirable-spec-widget .spec-number-unit {\r\n    font-weight: 500;\r\n  }\r\n  #mirable-spec-widget .spec-number-percent .spec-number-digit {\r\n    font-size: 1.25em;\r\n  }\r\n  #mirable-spec-widget .spec-number-percent .spec-number-unit {\r\n    font-size: 1em;\r\n  }\r\n  #mirable-spec-widget .spec-number-price .spec-number-digit {\r\n    font-size: 1.6em;\r\n  }\r\n  #mirable-spec-widget .spec-number-price .spec-number-unit {\r\n    font-size: 1.1em;\r\n  }\r\n  #mirable-spec-widget .spec-number-plain .spec-number-digit {\r\n    font-size: 1.15em;\r\n  }\r\n  #mirable-spec-widget .spec-number-plain .spec-number-unit {\r\n    font-size: 1em;\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* \u6bd4\u8f03\u8868\u5168\u4f53\u3092\u56f2\u3046\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a\u67a0 *\/\r\n  #mirable-spec-widget .spec-table-wrap {\r\n    overflow: auto;\r\n    height: var(--spec-table-height);\r\n    border-radius: var(--spec-table-radius);\r\n    border: 1px solid var(--spec-border-color) !important;\r\n    background: #FFFFFF !important;\r\n    cursor: grab;\r\n    user-select: none;\r\n    -webkit-overflow-scrolling: touch;\r\n    box-sizing: border-box;\r\n  }\r\n  #mirable-spec-widget .spec-table-wrap.is-dragging {\r\n    cursor: grabbing;\r\n  }\r\n\r\n  \/* \u30c6\u30fc\u30d6\u30eb\u672c\u4f53\uff1atable-layout: fixed \u3067\u5217\u5e45\u3092\u56fa\u5b9a\r\n     \u5b9f\u969b\u306e\u5e45\uff08px\uff09\u306f\u3001\u9078\u629e\u53f0\u6570\u306b\u5fdc\u3058\u3066JS\u5074\uff08React\uff09\u3067\u8a08\u7b97\u3057\u3001\r\n     CSS\u5909\u6570 --spec-table-total-width \u7d4c\u7531\u3067\u6e21\u3057\u3066\u3044\u307e\u3059\u3002\r\n     !important \u3092\u4ed8\u3051\u3066\u3044\u308b\u306e\u306f\u3001\u30c6\u30fc\u30de\u5074\u306e \"table { width:100% }\" \u306e\u3088\u3046\u306a\r\n     \u6307\u5b9a\u306b\u8ca0\u3051\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u3067\u3059\u3002\r\n     border-collapse \u306f\u6562\u3048\u3066 separate \u306b\u3057\u3066\u3044\u307e\u3059\u3002sticky\u6307\u5b9a\u306e\u30bb\u30eb\u3068\r\n     collapse \u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u307e\u3067\u67a0\u7dda\u304c\u6b63\u3057\u304f\u518d\u63cf\u753b\u3055\u308c\u306a\u3044\r\n     \u3068\u3044\u3046\u30d6\u30e9\u30a6\u30b6\u5074\u306e\u4e0d\u5177\u5408\u304c\u3042\u308b\u305f\u3081\u3002\u5404\u30bb\u30eb\u306e\u7f6b\u7dda\u306fborder-bottom\/\r\n     border-left\u306e\u307f\u3067\u7d44\u3093\u3067\u3044\u308b\u306e\u3067\u3001\u898b\u305f\u76ee\u306fcollapse\u3068\u307b\u307c\u540c\u3058\u306b\u306a\u308b\u3002 *\/\r\n  #mirable-spec-widget .spec-table {\r\n    width: var(--spec-table-total-width) !important;\r\n    max-width: none !important;\r\n    border-collapse: separate !important;\r\n    border-spacing: 0 !important;\r\n    font-size: 14px;\r\n    table-layout: fixed !important;\r\n  }\r\n  #mirable-spec-widget .spec-table th,\r\n  #mirable-spec-widget .spec-table td {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* \u5de6\u4e0a\u306e\u89d2\uff08\u300c\u30b9\u30da\u30c3\u30af\u9805\u76ee\u300d\u30e9\u30d9\u30eb\uff09\u30bb\u30eb *\/\r\n  #mirable-spec-widget .spec-table-corner {\r\n    position: sticky;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 30;\r\n    background: var(--spec-header-bg) !important;\r\n    text-align: left;\r\n    font-size: 11px;\r\n    letter-spacing: 0.05em;\r\n    text-transform: uppercase;\r\n    color: #8A9089;\r\n    font-weight: 600;\r\n    padding: var(--spec-cell-padding-y) var(--spec-cell-padding-x) !important;\r\n    border: none !important;\r\n    border-bottom: 1px solid var(--spec-border-color) !important;\r\n  }\r\n\r\n  \/* \u5404\u5546\u54c1\u306e\u30d8\u30c3\u30c0\u30fc\u30bb\u30eb\uff08\u753b\u50cf\u30fb\u5546\u54c1\u540d\u30fb\u524a\u9664\u30dc\u30bf\u30f3\uff09 *\/\r\n  #mirable-spec-widget .spec-table-head-cell {\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 20;\r\n    background: var(--spec-header-bg) !important;\r\n    text-align: center;\r\n    vertical-align: bottom !important;\r\n    padding: var(--spec-cell-padding-y) var(--spec-cell-padding-x) !important;\r\n    border: none !important;\r\n    border-bottom: 1px solid var(--spec-border-color) !important;\r\n    border-left: 1px solid var(--spec-border-color) !important;\r\n  }\r\n  #mirable-spec-widget .spec-table-head-inner {\r\n    display: inline-flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 8px;\r\n    text-align: left;\r\n  }\r\n  #mirable-spec-widget .spec-table-head-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  #mirable-spec-widget .spec-table-device-name {\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: #1B1F23;\r\n    line-height: 1.3;\r\n  }\r\n  #mirable-spec-widget .spec-table-remove-btn {\r\n    margin-top: 4px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n    font-size: 10px;\r\n    color: #8A9089;\r\n    background: none;\r\n    border: none !important;\r\n    padding: 0;\r\n    cursor: pointer;\r\n    align-self: flex-start;\r\n  }\r\n  #mirable-spec-widget .spec-table-remove-btn:hover {\r\n    color: #C0473B;\r\n  }\r\n\r\n  \/* \u5404\u5546\u54c1\u306e\u300c\u5546\u54c1\u30da\u30fc\u30b8\u306f\u3053\u3061\u3089\u300d\u30dc\u30bf\u30f3 *\/\r\n  #mirable-spec-widget .spec-table-product-link {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    margin-top: 6px;\r\n    padding: 3px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid var(--spec-accent);\r\n    color: var(--spec-accent);\r\n    font-size: 10.5px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    align-self: flex-start;\r\n    transition: background-color 0.15s ease, color 0.15s ease;\r\n  }\r\n  #mirable-spec-widget .spec-table-product-link:hover {\r\n    background-color: var(--spec-accent);\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  \/* \u5de6\u7aef\u306e\u300c\u30b9\u30da\u30c3\u30af\u9805\u76ee\u300d\u5217\uff08\u884c\u30e9\u30d9\u30eb\uff09 *\/\r\n  #mirable-spec-widget .spec-row-label {\r\n    position: sticky;\r\n    left: 0;\r\n    z-index: 10;\r\n    text-align: left;\r\n    font-size: var(--spec-label-font-size);\r\n    font-weight: 600;\r\n    line-height: 1.5em;\r\n    color: #5B6570;\r\n    padding: var(--spec-cell-padding-y) var(--spec-cell-padding-x) !important;\r\n    border: none !important;\r\n    border-bottom: 1px solid var(--spec-border-color-light) !important;\r\n    vertical-align: top !important;\r\n    white-space: normal !important;\r\n    overflow-wrap: break-word !important;\r\n    word-break: break-word !important;\r\n  }\r\n  #mirable-spec-widget .spec-row-note {\r\n    margin-top: 4px;\r\n    font-size: 9.5px;\r\n    font-weight: 400;\r\n    color: #9AA3A2;\r\n    line-height: 1.3;\r\n    white-space: normal !important;\r\n    max-width: 9rem;\r\n  }\r\n\r\n  \/* \u4e26\u3079\u66ff\u3048\u30dc\u30bf\u30f3\uff08\u4fa1\u683c\u30fb\u767a\u58f2\u30fb\u672c\u4f53\u91cd\u91cf\u306e\u4e0b\u306b\u8868\u793a\uff09 *\/\r\n  #mirable-spec-widget .spec-sort-buttons {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 4px;\r\n    margin-top: 6px;\r\n  }\r\n  #mirable-spec-widget .spec-sort-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    color: #5B6570;\r\n    background: #FFFFFF;\r\n    border: 1px solid #EEEEEE !important;\r\n    border-radius: 999px;\r\n    padding: 3px 8px;\r\n    cursor: pointer;\r\n    white-space: nowrap;\r\n  }\r\n  #mirable-spec-widget .spec-sort-btn:hover {\r\n    border-color: var(--spec-accent) !important;\r\n    color: var(--spec-accent);\r\n  }\r\n  #mirable-spec-widget .spec-sort-btn.is-active {\r\n    background: var(--spec-accent);\r\n    border-color: var(--spec-accent) !important;\r\n    color: #FFFFFF;\r\n  }\r\n  \/* PC\u3067\u306f\u901a\u5e38\u30e9\u30d9\u30eb\u3001\u30b9\u30de\u30db\u3067\u306f\u77ed\u7e2e\u30e9\u30d9\u30eb\u3092\u8868\u793a\u3059\u308b *\/\r\n  #mirable-spec-widget .spec-sort-btn-short {\r\n    display: none;\r\n  }\r\n  @media (max-width: 640px) {\r\n    #mirable-spec-widget .spec-sort-btn-full {\r\n      display: none;\r\n    }\r\n    #mirable-spec-widget .spec-sort-btn-short {\r\n      display: inline;\r\n    }\r\n  }\r\n\r\n  \/* \u300c\u52b9\u679c\u300d\u306e\u4e2d\u9805\u76ee\u30e9\u30d9\u30eb\uff1a\u30e9\u30d9\u30eb\u6587\u5b57\uff0b\u30a2\u30a4\u30b3\u30f3\u306e\u307f\u306e\u4e26\u3079\u66ff\u3048\u30dc\u30bf\u30f3 *\/\r\n  #mirable-spec-widget .spec-effect-sublabel-inner {\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 4px;\r\n  }\r\n  #mirable-spec-widget .spec-sort-icons {\r\n    display: inline-flex;\r\n    gap: 2px;\r\n  }\r\n  #mirable-spec-widget .spec-sort-icon-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 16px;\r\n    height: 16px;\r\n    padding: 0;\r\n    border: 1px solid #EEEEEE !important;\r\n    border-radius: 999px;\r\n    background: #FFFFFF;\r\n    color: #B7BDBB;\r\n    cursor: pointer;\r\n    flex-shrink: 0;\r\n  }\r\n  #mirable-spec-widget .spec-sort-icon-btn:hover {\r\n    border-color: var(--spec-accent) !important;\r\n    color: var(--spec-accent);\r\n  }\r\n  #mirable-spec-widget .spec-sort-icon-btn.is-active {\r\n    background: var(--spec-accent);\r\n    border-color: var(--spec-accent) !important;\r\n    color: #FFFFFF;\r\n  }\r\n\r\n  \/* \u30c7\u30fc\u30bf\u30bb\u30eb\uff08\u5404\u5546\u54c1\u306e\u30b9\u30da\u30c3\u30af\u5185\u5bb9\uff09 *\/\r\n  #mirable-spec-widget .spec-table-cell {\r\n    padding: var(--spec-cell-padding-y) var(--spec-cell-padding-x) !important;\r\n    border: none !important;\r\n    border-bottom: 1px solid var(--spec-border-color-light) !important;\r\n    border-left: 1px solid var(--spec-border-color-light) !important;\r\n    font-size: var(--spec-cell-font-size);\r\n    color: #1B1F23;\r\n    line-height: 1.6;\r\n    vertical-align: top !important;\r\n    white-space: pre-line !important;\r\n    overflow-wrap: break-word !important;\r\n    word-break: break-word !important;\r\n    text-align: center !important;\r\n  }\r\n\r\n  \/* \u7e1e\u6a21\u69d8\uff08\u5947\u6570\u884c\u30fb\u5076\u6570\u884c\u306e\u80cc\u666f\u8272\uff09 *\/\r\n  #mirable-spec-widget .spec-row-even { background: var(--spec-row-bg) !important; }\r\n  #mirable-spec-widget .spec-row-odd { background: var(--spec-row-alt-bg) !important; }\r\n\r\n  \/* \u300c\u52b9\u679c\u300d\u30bb\u30af\u30b7\u30e7\u30f3\uff1a\u5de6\u7aef\u306e\u7e26\u66f8\u304d\u898b\u51fa\u3057\uff08\u6d17\u6d44\u529b\u301c\u6e29\u307e\u308a\u306e6\u884c\u3092rowSpan\u3067\u307e\u3068\u3081\u308b\uff09 *\/\r\n  #mirable-spec-widget .spec-effect-heading {\r\n    position: sticky;\r\n    left: 0;\r\n    z-index: 10;\r\n    background: #FFFFFF !important;\r\n    color: #5B6570;\r\n    text-align: center !important;\r\n    vertical-align: middle;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.15em;\r\n    padding: var(--spec-cell-padding-y) 6px !important;\r\n    border: none !important;\r\n    border-bottom: 1px solid var(--spec-border-color-light) !important;\r\n    border-right: 1px solid var(--spec-border-color-light) !important;\r\n  }\r\n  #mirable-spec-widget .spec-effect-heading span {\r\n    display: block;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  \/* \u300c\u52b9\u679c\u300d\u30bb\u30af\u30b7\u30e7\u30f3\uff1a\u4e2d\u9805\u76ee\u30e9\u30d9\u30eb\uff08\u6d17\u6d44\u529b\u3001\u6d17\u6d44\u7bc4\u56f2\u2026\uff09 *\/\r\n  #mirable-spec-widget .spec-effect-sublabel {\r\n    position: sticky;\r\n    left: 0;\r\n    z-index: 10;\r\n    text-align: left !important;\r\n    font-size: var(--spec-label-font-size);\r\n    font-weight: 600;\r\n    color: #5B6570;\r\n    padding: var(--spec-cell-padding-y) var(--spec-cell-padding-x) !important;\r\n    white-space: normal !important;\r\n    overflow-wrap: break-word !important;\r\n    border: none !important;\r\n  }\r\n\r\n  \/* \u52b9\u679c\u30bb\u30af\u30b7\u30e7\u30f3\u5185\u306e\u884c\u306f\u7e1e\u6a21\u69d8\u306b\u305b\u305a\u3001\u533a\u5207\u308a\u306f\u70b9\u7dda\u306b\u3059\u308b\u3002\r\n     \u884c\u306e\u9ad8\u3055\u3082\u5c11\u3057\u4f4e\u3081\u306b\u3059\u308b\u3002\r\n     \u203b border \u3067\u306f\u306a\u304f background-image\uff08\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\uff09\u3067\u70b9\u7dda\u3092\u63cf\u3044\u3066\u3044\u308b\u3002\r\n        sticky\u6307\u5b9a\u306e\u30bb\u30eb\u3067 border \u304c\u4e8c\u91cd\u306b\u898b\u3048\u3066\u3057\u307e\u3046\u4e0d\u5177\u5408\u3092\u907f\u3051\u308b\u305f\u3081\u3002 *\/\r\n  #mirable-spec-widget .spec-row-effect {\r\n    background-color: #FFFFFF !important;\r\n    padding-top: 6px !important;\r\n    padding-bottom: 6px !important;\r\n    border: none !important;\r\n    background-image: linear-gradient(\r\n      to right,\r\n      var(--spec-border-color) 0,\r\n      var(--spec-border-color) 4px,\r\n      transparent 4px,\r\n      transparent 8px\r\n    ) !important;\r\n    background-repeat: repeat-x !important;\r\n    background-position: left bottom !important;\r\n    background-size: 8px 2px !important;\r\n  }\r\n  #mirable-spec-widget td.spec-row-effect {\r\n    border-left: 1px solid var(--spec-border-color-light) !important;\r\n  }\r\n  #mirable-spec-widget .spec-row-effect-last {\r\n    background-image: none !important;\r\n    border-bottom: 1px solid var(--spec-border-color-light) !important;\r\n  }\r\n\r\n  \/* \u300c\u52b9\u679c\u300d\u306e\u2605\u8a55\u4fa1\u8868\u793a\uff08\u5c11\u3057\u5927\u304d\u3081\u3067\u66f2\u7dda\u7684\u306aSVG\u306e\u661f\u3001\u26051\u3064\u305a\u3064\u500b\u5225\u306b\u5857\u308a\u3064\u3076\u3059\uff09 *\/\r\n  #mirable-spec-widget .spec-star-rating {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 2px;\r\n  }\r\n  #mirable-spec-widget .spec-star-single {\r\n    position: relative;\r\n    display: inline-block;\r\n    line-height: 0;\r\n  }\r\n  #mirable-spec-widget .spec-star-single-fill {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    overflow: hidden;\r\n    height: 100%;\r\n    line-height: 0;\r\n  }\r\n\r\n  \/* \u300c\u7279\u5fb4\u300d\u30bf\u30b0\uff08\u30a2\u30a4\u30b3\u30f3\u4ed8\u304d\u30d4\u30eb\u578b\u30d0\u30c3\u30b8\uff09 *\/\r\n  #mirable-spec-widget .spec-feature-tag-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    gap: 6px;\r\n    width: 100%;\r\n    max-width: 250px;\r\n    margin: 0 auto;\r\n  }\r\n  #mirable-spec-widget .spec-feature-tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 7px;\r\n    width: 100%;\r\n    max-width: 250px;\r\n    box-sizing: border-box;\r\n    background: #FFFFFF;\r\n    border: 1px solid #EEEEEE;\r\n    color: #1B1F23;\r\n    padding: 5px 12px;\r\n    border-radius: 999px;\r\n    font-size: 12.5px;\r\n    font-weight: 600;\r\n    line-height: 1.3;\r\n    white-space: nowrap;\r\n  }\r\n  #mirable-spec-widget .spec-feature-tag-new {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: #E8563B;\r\n    color: #FFFFFF;\r\n    font-size: 9.5px;\r\n    font-weight: 700;\r\n    padding: 2px 6px;\r\n    border-radius: 999px;\r\n    letter-spacing: 0.02em;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  \/* \u300c\u6c34\u6d41\u30e2\u30fc\u30c9\u300d\u306e\u30b9\u30e9\u30a4\u30c0\u30fc *\/\r\n  #mirable-spec-widget .spec-watermode {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n    width: 100%;\r\n    max-width: 250px;\r\n    margin: 0 auto;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-image-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 150px;\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n    background: #2B3138;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-image {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-label {\r\n    position: absolute;\r\n    left: 50%;\r\n    bottom: 8px;\r\n    transform: translateX(-50%);\r\n    background: rgba(0, 0, 0, 0.55);\r\n    color: #FFFFFF;\r\n    font-weight: 600;\r\n    padding: 3px 10px;\r\n    border-radius: 999px;\r\n    white-space: nowrap;\r\n    text-align: center;\r\n    line-height: 1.3;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    box-sizing: border-box;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-arrow {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 24px;\r\n    height: 24px;\r\n    border-radius: 999px;\r\n    background: rgba(0, 0, 0, 0.35);\r\n    border: none !important;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    padding: 0;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-arrow:hover {\r\n    background: rgba(0, 0, 0, 0.55);\r\n  }\r\n  #mirable-spec-widget .spec-watermode-arrow-prev { left: 6px; }\r\n  #mirable-spec-widget .spec-watermode-arrow-next { right: 6px; }\r\n  #mirable-spec-widget .spec-watermode-dots {\r\n    position: absolute;\r\n    top: 8px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    gap: 4px;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-dot {\r\n    width: 5px;\r\n    height: 5px;\r\n    border-radius: 999px;\r\n    background: rgba(255, 255, 255, 0.5);\r\n  }\r\n  #mirable-spec-widget .spec-watermode-dot.is-active {\r\n    background: #FFFFFF;\r\n  }\r\n  #mirable-spec-widget .spec-watermode-stats {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 2px;\r\n    font-size: 11px;\r\n    color: #5B6570;\r\n    line-height: 1.5;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* \u300c\u6c34\u6d41\u8abf\u7bc0\u6a5f\u80fd\u300d\u300c\u30c8\u30eb\u30cd\u30fc\u30c9\u30b9\u30c6\u30a3\u30c3\u30af\u4ed8\u5c5e\u300d\u306e\u30a2\u30a4\u30b3\u30f3\u8868\u793a *\/\r\n  #mirable-spec-widget .spec-status-value {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n  #mirable-spec-widget .spec-status-note {\r\n    font-size: 10.5px;\r\n    color: #8A9089;\r\n    line-height: 1.4;\r\n    white-space: pre-line;\r\n  }\r\n\r\n  \/* \u300c\u7bc0\u6c34\u6a5f\u80fd\u300d\uff1aPC\u306f\u300c\u30e2\u30fc\u30c9\u540d\uff1a\u7d04\u25ef\uff05\u300d\u30921\u884c\u3001\r\n     \u30b9\u30de\u30db\u306f\u5e45\u304c\u8db3\u308a\u306a\u3044\u306e\u3067\u300c\u30e2\u30fc\u30c9\u540d\u300d\u2192\u6539\u884c\u2192\u300c\u7d04\u25ef\uff05\u300d\u306e2\u884c\u306b\u3059\u308b *\/\r\n  #mirable-spec-widget .spec-percent-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n  #mirable-spec-widget .spec-percent-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: baseline;\r\n    gap: 3px;\r\n    white-space: nowrap;\r\n  }\r\n  #mirable-spec-widget .spec-percent-label {\r\n    font-size: 11px;\r\n    color: #5B6570;\r\n  }\r\n  #mirable-spec-widget .spec-percent-label::after {\r\n    content: \"\uff1a\";\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    #mirable-spec-widget .spec-percent-row {\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 0;\r\n      white-space: normal;\r\n    }\r\n    #mirable-spec-widget .spec-percent-label::after {\r\n      content: \"\";\r\n    }\r\n  }\r\n\r\n  \/* \u30b9\u30de\u30db\u5e45\u3067\u306f\u9078\u629e\u30b0\u30ea\u30c3\u30c9\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u5c0f\u3055\u304f\u3057\u30663\u5217\u00d72\u6bb5\u306b\u53ce\u3081\u308b *\/\r\n  @media (max-width: 640px) {\r\n    #mirable-spec-widget .spec-grid-thumb {\r\n      width: 44px !important;\r\n      height: 44px !important;\r\n    }\r\n  }\r\n\r\n  \/* \u30b9\u30de\u30db\u5e45\u3067\u306f\u6bd4\u8f03\u8868\u306e\u30bb\u30eb\u4f59\u767d\u30fb\u6587\u5b57\u30b5\u30a4\u30ba\u30fb\u9ad8\u3055\u3092\u5c11\u3057\u8a70\u3081\u3066\r\n     \u753b\u9762\u5185\u306b\u3088\u308a\u591a\u304f\u306e\u60c5\u5831\u304c\u53ce\u307e\u308b\u3088\u3046\u306b\u3059\u308b *\/\r\n  @media (max-width: 640px) {\r\n    #mirable-spec-widget {\r\n      --spec-cell-padding-x: 10px;\r\n      --spec-cell-padding-y: 10px;\r\n      --spec-cell-font-size: 11.5px;\r\n      --spec-label-font-size: 10.5px;\r\n      --spec-table-height: 460px;\r\n      --spec-table-radius: 0px;\r\n    }\r\n    #mirable-spec-widget .spec-effect-heading {\r\n      padding-left: 2px !important;\r\n      padding-right: 2px !important;\r\n      font-size: 10.5px;\r\n      letter-spacing: 0.05em;\r\n    }\r\n    #mirable-spec-widget .spec-effect-sublabel {\r\n      font-size: 10px !important;\r\n    }\r\n  }\r\n\r\n  \/* ------------------------------------------------------------\r\n     \u30b9\u30de\u30db\u5bfe\u5fdc\uff1a\u591a\u304f\u306eWordPress\u30c6\u30fc\u30de\u306f\u3001\u72ed\u3044\u753b\u9762\u5e45\u3067\r\n     table \/ tr \/ td \u3092 display:block \u306b\u5909\u63db\u3059\u308b\u300c\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c6\u30fc\u30d6\u30eb\u300d\r\n     CSS\u3092\u6301\u3063\u3066\u3044\u308b\u3002\u305d\u308c\u304c\u3053\u306e\u6bd4\u8f03\u8868\u306b\u3082\u52b9\u3044\u3066\u3057\u307e\u3044\u3001\r\n     \u30bb\u30eb\u304c\u7e26\u306b\u7a4d\u307f\u4e0a\u304c\u3063\u3066\u898b\u3048\u3066\u3057\u307e\u3046\u305f\u3081\u3001\u3053\u3053\u3067\u660e\u793a\u7684\u306b\r\n     table \u8868\u793a\u3092\u5f37\u5236\u3057\u76f4\u3057\u3001\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7dad\u6301\u3059\u308b\u3002\r\n     ------------------------------------------------------------ *\/\r\n  #mirable-spec-widget .spec-table-wrap {\r\n    display: block !important;\r\n  }\r\n  #mirable-spec-widget .spec-table {\r\n    display: table !important;\r\n  }\r\n  #mirable-spec-widget .spec-table thead {\r\n    display: table-header-group !important;\r\n  }\r\n  #mirable-spec-widget .spec-table tbody {\r\n    display: table-row-group !important;\r\n  }\r\n  #mirable-spec-widget .spec-table tr {\r\n    display: table-row !important;\r\n  }\r\n  #mirable-spec-widget .spec-table th,\r\n  #mirable-spec-widget .spec-table td {\r\n    display: table-cell !important;\r\n    width: auto; \/* colgroup \u306e width \u6307\u5b9a\u3092\u512a\u5148\u3055\u305b\u308b *\/\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"mirable-spec-app-root\">\u8aad\u307f\u8fbc\u307f\u4e2d\u2026<\/div>\r\n\r\n<script type=\"text\/babel\" data-presets=\"react\">\r\n(function () {\r\nconst { useState, useMemo, useRef, useCallback, useEffect } = React;\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u5546\u54c1\u30c7\u30fc\u30bf\uff08\u30df\u30e9\u30d6\u30eb\u6bd4\u8f03\u8868.xlsx \u3088\u308a\uff09\r\n\/\/ ------------------------------------------------------------------\r\nconst DEVICES = [\r\n  {\r\n    id: \"ex\",\r\n    name: \"\u30df\u30e9\u30d6\u30ebEx\",\r\n    image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hi_01.png\",\r\n    url: \"https:\/\/milky-selections.com\/mirable\/itemall\/ex\",\r\n    specs: {\r\n      recommendFor: \"\u30c7\u30b6\u30a4\u30f3\u6027\u3068\u6a5f\u80fd\u6027\u3069\u3061\u3089\u306b\u3082\u3053\u3060\u308f\u308a\u305f\u3044\",\r\n      shortFeature: [\r\n        { label: \"\u6700\u65b0\u30e2\u30c7\u30eb\", icon: \"sparkle\", isNew: true },\r\n        { label: \"\u7f8e\u808c\u30fb\u7f8e\u9aea\u30fb\u53e3\u5143\u30b1\u30a2\", icon: \"sparkle\" },\r\n        { label: \"\u8d05\u6ca2\u306a\u6d74\u3073\u5fc3\u5730\", icon: \"shower\" },\r\n        { label: \"\u7bc0\u6c34\u6a5f\u80fd\", icon: \"droplet\" },\r\n        { label: \"\u4e00\u6642\u6b62\u6c34\", icon: \"pause\" },\r\n      ],\r\n      effectCleaning: \"\u2605\uff15\",\r\n      effectRange: \"\u2605\uff14\",\r\n      effectSoftness: \"\u2605\uff14\",\r\n      effectPower: \"\u2605\uff14\",\r\n      effectMoisture: \"\u2605\uff15\",\r\n      effectWarmth: \"\u2605\uff15\",\r\n      waterTypes: \"3\u30e2\u30fc\u30c9\",\r\n      waterModes: [\r\n        { name: \"\u808c\u3064\u3084\u30e2\u30fc\u30c9\", flow: \"5.0L\/min\", particleType: \"UFB\", particleValue: \"4500\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_ex_03.jpg\" },\r\n        { name: \"\u982d\u76ae\u30e2\u30fc\u30c9\", flow: \"9.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"2600\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_ex_02.jpg\" },\r\n        { name: \"\u6b6f\u9593\u30e2\u30fc\u30c9\", flow: \"6.5L\uff0fmin\", particleType: \"UFB\", particleValue: \"2500\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_ex_01.jpg\" },\r\n      ],\r\n      waterAdjust: \"\u25ce\\n\u203b\u5b8c\u5168\u6b62\u6c34\u3067\u306f\u3042\u308a\u307e\u305b\u3093\",\r\n      waterSaving: [\r\n        { label: \"\u808c\u3064\u3084\u30e2\u30fc\u30c9\", percent: \"\u7d0450\uff05\" },\r\n        { label: \"\u982d\u76ae\u30e2\u30fc\u30c9\", percent: \"\u7d0410\uff05\" },\r\n        { label: \"\u6b6f\u9593\u30e2\u30fc\u30c9\", percent: \"\u7d0435\uff05\" },\r\n      ],\r\n      price: \"\uffe538,500\",\r\n      modelNumber: \"FBSMEX-TSC-CMSC\",\r\n      release: \"2026\u5e747\u6708\",\r\n      tornadoStick: \"\u3007\\n(\uff11\u672c\u4ed8\u5c5e)\",\r\n      dimensions: \"208mm\u00d7135mm\u00d7\u03c672mm\",\r\n      headAngle: \"\u30cf\u30f3\u30c9\u30eb\u5782\u76f4\u306b\u5bfe\u305740\u00b0\",\r\n      weight: \"265g\",\r\n      material: \"ABS\u6a39\u8102\\nPOM\\nPETG\\n\u30b4\u30e0(EPDM)\\n\u30b9\u30c6\u30f3\u30ec\u30b9\\n\u30e1\u30c3\u30ad\",\r\n    },\r\n  },\r\n  {\r\n    id: \"zero\",\r\n    name: \"\u30df\u30e9\u30d6\u30ebzero\",\r\n    image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hi_02.png\",\r\n    url: \"https:\/\/milky-selections.com\/mirable\/itemall\/item_007\",\r\n    specs: {\r\n      recommendFor: \"\u5168\u8eab\u306e\u6d17\u6d44\u529b\u306b\u3053\u3060\u308f\u308a\u305f\u3044\",\r\n      shortFeature: [\r\n        { label: \"\u7f8e\u808c\u30fb\u7f8e\u9aea\u30fb\u53e3\u5143\u30b1\u30a2\", icon: \"sparkle\" },\r\n        { label: \"\u8d05\u6ca2\u306a\u6d74\u3073\u5fc3\u5730\", icon: \"shower\" },\r\n        { label: \"\u7bc0\u6c34\u6a5f\u80fd\", icon: \"droplet\" },\r\n        { label: \"\u4e00\u6642\u6b62\u6c34\", icon: \"pause\" },\r\n      ],\r\n      effectCleaning: \"\u2605\uff14\",\r\n      effectRange: \"\u26054.5\",\r\n      effectSoftness: \"\u2605\uff14\",\r\n      effectPower: \"\u26053.5\",\r\n      effectMoisture: \"\u26054.5\",\r\n      effectWarmth: \"\u26054.5\",\r\n      waterTypes: \"3\u30e2\u30fc\u30c9\",\r\n      waterModes: [\r\n        { name: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\", flow: \"5.5L\uff0fmin\", particleType: \"UFB\", particleValue: \"3500\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_zero_02.jpg\" },\r\n        { name: \"\u30b9\u30d7\u30e9\u30c3\u30b7\u30e5\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"7.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"2300\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_zero_01.jpg\" },\r\n        { name: \"\u30ea\u30f3\u30b0\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"6.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"2300\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_zero_03.jpg\" },\r\n      ],\r\n      waterAdjust: \"\u25ef\\n\u203b\u5b8c\u5168\u6b62\u6c34\u3067\u306f\u3042\u308a\u307e\u305b\u3093\",\r\n      waterSaving: [\r\n        { label: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u6c34\u6d41\", percent: \"\u7d0460\uff05\" },\r\n        { label: \"\u30b9\u30d7\u30e9\u30c3\u30b7\u30e5\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0415\uff05\" },\r\n        { label: \"\u30ea\u30f3\u30b0\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0440\uff05\" },\r\n      ],\r\n      price: \"\uffe549,390\",\r\n      modelNumber: \"FBSMZ-TSC-CSC\",\r\n      release: \"2022\u5e746\u6708\",\r\n      tornadoStick: \"\u3007\\n(\uff11\u672c\u4ed8\u5c5e)\",\r\n      dimensions: \"220mm\u00d7110mm\u00d7\u03c670mm\",\r\n      headAngle: \"\u30cf\u30f3\u30c9\u30eb\u5782\u76f4\u306b\u5bfe\u305750\u00b0\",\r\n      weight: \"350g\",\r\n      material: \"ABS\u6a39\u8102\\n\u30dd\u30ea\u30ab\u30fc\u30dc\u30cd\u30fc\u30c8\\nPOM\\n\u30b4\u30e0(EPDM)\\n\u30b9\u30c6\u30f3\u30ec\u30b9\",\r\n    },\r\n  },\r\n  {\r\n    id: \"sara\",\r\n    name: \"\u30df\u30e9\u30d6\u30eb\u723d(\u3055\u3089)\",\r\n    image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hi_03.png\",\r\n    url: \"https:\/\/milky-selections.com\/mirable\/itemall\/item_011\",\r\n    specs: {\r\n      recommendFor: \"\u624b\u65e9\u304f\u5168\u8eab\u3092\u6d17\u3044\u6d41\u3057\u723d\u5feb\u306b\u6d74\u3073\u305f\u3044\",\r\n      shortFeature: [\r\n        { label: \"\u30d9\u30bf\u3064\u304d\u30b1\u30a2\", icon: \"hand\" },\r\n        { label: \"\u624b\u65e9\u304f\u6d17\u3048\u308b\", icon: \"clock\" },\r\n        { label: \"\u723d\u5feb\u306a\u6d74\u3073\u5fc3\u5730\", icon: \"shower\" },\r\n      ],\r\n      effectCleaning: \"\u26053.5\",\r\n      effectRange: \"\u2605\uff15\",\r\n      effectSoftness: \"\u2605\uff14\",\r\n      effectPower: \"\u2605\uff15\",\r\n      effectMoisture: \"\u2605\uff13\",\r\n      effectWarmth: \"\u2605\uff14\",\r\n      waterTypes: \"2\u30e2\u30fc\u30c9\",\r\n      waterModes: [\r\n        { name: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u30ef\u30a4\u30c9\", flow: \"7.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"3200\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_sara_01.jpg\" },\r\n        { name: \"\u30c9\u30fc\u30e0\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"6.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"2000\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_sara_02.jpg\" },\r\n      ],\r\n      waterAdjust: \"\u30fc\",\r\n      waterSaving: [\r\n        { label: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u30ef\u30a4\u30c9\u6c34\u6d41\", percent: \"\u7d0430\uff05\" },\r\n        { label: \"\u30c9\u30fc\u30e0\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0440\uff05\" },\r\n      ],\r\n      price: \"\uffe529,700\",\r\n      modelNumber: \"FBSM-AC2-WSC\",\r\n      release: \"2024\u5e744\u6708\",\r\n      tornadoStick: \"\u00d7\\n(\u5225\u58f2)\",\r\n      dimensions: \"186mm\u00d778mm\u00d7\u03c6100mm\",\r\n      headAngle: \"\u30cf\u30f3\u30c9\u30eb\u5782\u76f4\u306b\u5bfe\u305770\u00b0\",\r\n      weight: \"253g\",\r\n      material: \"ABS\u6a39\u8102\\n\u30dd\u30ea\u30ab\u30fc\u30dc\u30cd\u30fc\u30c8\\nPOM\\n\u30b4\u30e0(EPDM)\\n\u30b9\u30c6\u30f3\u30ec\u30b9\",\r\n    },\r\n  },\r\n  {\r\n    id: \"uru\",\r\n    name: \"\u30df\u30e9\u30d6\u30eb\u6f64(\u3046\u308b)\",\r\n    image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hi_04.png\",\r\n    url: \"https:\/\/milky-selections.com\/mirable\/itemall\/item_012\",\r\n    specs: {\r\n      recommendFor: \"\u3046\u308b\u304a\u3044\u611f\u3092\u91cd\u8996\u3057\u808c\u3092\u3059\u3053\u3084\u304b\u306b\u6574\u3048\u305f\u3044\",\r\n      shortFeature: [\r\n        { label: \"\u4e7e\u71e5\u30b1\u30a2\", icon: \"humidity\" },\r\n        { label: \"\u3084\u3055\u3057\u3044\u808c\u3042\u305f\u308a\", icon: \"gentle\" },\r\n        { label: \"\u7bc0\u6c34\u6a5f\u80fd\", icon: \"droplet\" },\r\n      ],\r\n      effectCleaning: \"\u2605\uff13\",\r\n      effectRange: \"\u2605\uff14\",\r\n      effectSoftness: \"\u2605\uff15\",\r\n      effectPower: \"\u2605\uff14\",\r\n      effectMoisture: \"\u26054.5\",\r\n      effectWarmth: \"\u2605\uff14\",\r\n      waterTypes: \"2\u30e2\u30fc\u30c9\",\r\n      waterModes: [\r\n        { name: \"\u5916\u89d2\u5ea6\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\", flow: \"5.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"3600\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_uru_01.jpg\" },\r\n        { name: \"\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"6.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"2300\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_uru_02.jpg\" },\r\n      ],\r\n      waterAdjust: \"\u30fc\",\r\n      waterSaving: [\r\n        { label: \"\u5916\u89d2\u5ea6\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u6c34\u6d41\", percent: \"\u7d0450\uff05\" },\r\n        { label: \"\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0440\uff05\" },\r\n      ],\r\n      price: \"\uffe539,600\",\r\n      modelNumber: \"FBSM-AC3-CPSC\",\r\n      release: \"2024\u5e744\u6708\",\r\n      tornadoStick: \"\u00d7\\n(\u5225\u58f2)\",\r\n      dimensions: \"155mm\u00d773mm\u00d7\u03c658mm\",\r\n      headAngle: \"\u30cf\u30f3\u30c9\u30eb\u5782\u76f4\u306b\u5bfe\u305740\u00b0\",\r\n      weight: \"173g\",\r\n      material: \"ABS\u6a39\u8102\\n\u30dd\u30ea\u30ab\u30fc\u30dc\u30cd\u30fc\u30c8\\nPOM\\n\u30b4\u30e0(EPDM)\\n\u30b9\u30c6\u30f3\u30ec\u30b9\\n\u30e1\u30c3\u30ad\",\r\n    },\r\n  },\r\n  {\r\n    id: \"tsuya\",\r\n    name: \"\u30df\u30e9\u30d6\u30eb\u8276(\u3064\u3084)\",\r\n    image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hi_05.png\",\r\n    url: \"https:\/\/milky-selections.com\/mirable\/itemall\/item_013\",\r\n    specs: {\r\n      recommendFor: \"\u5e74\u9f62\u3092\u611f\u3058\u3084\u3059\u3044\u808c\u3092\u512a\u3057\u304f\u30b1\u30a2\u3057\u305f\u3044\",\r\n      shortFeature: [\r\n        { label: \"\u5e74\u9f62\u808c\u30b1\u30a2\", icon: \"age\" },\r\n        { label: \"\u3084\u3055\u3057\u3044\u808c\u3042\u305f\u308a\", icon: \"gentle\" },\r\n        { label: \"\u7bc0\u6c34\u6a5f\u80fd\", icon: \"droplet\" },\r\n      ],\r\n      effectCleaning: \"\u26054.5\",\r\n      effectRange: \"\u2605\uff13\",\r\n      effectSoftness: \"\u26054.5\",\r\n      effectPower: \"\u2605\uff15\",\r\n      effectMoisture: \"\u26054.5\",\r\n      effectWarmth: \"\u2605\uff15\",\r\n      waterTypes: \"3\u30e2\u30fc\u30c9\",\r\n      waterModes: [\r\n        { name: \"\u9ad8\u5bc6\u5ea6\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\", flow: \"5.5L\uff0fmin\", particleType: \"UFB\", particleValue: \"3500\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_tsuya_01.jpg\" },\r\n        { name: \"\u30b9\u30c8\u30ec\u30c3\u30c1\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"7.0L\uff0fmin\", particleType: \"UFB\", particleValue: \"2300\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_tsuya_02.jpg\" },\r\n        { name: \"\u30a6\u30a9\u30fc\u30e0\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"7.5L\uff0fmin\", particleType: \"UFB\", particleValue: \"2000\u4e07\u500b\uff0fmL\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_tsuya_03.jpg\" },\r\n      ],\r\n      waterAdjust: \"\u25ef\\n\u203b\u5b8c\u5168\u6b62\u6c34\u3067\u306f\u3042\u308a\u307e\u305b\u3093\",\r\n      waterSaving: [\r\n        { label: \"\u9ad8\u5bc6\u5ea6\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u6c34\u6d41\", percent: \"\u7d0455\uff05\" },\r\n        { label: \"\u30b9\u30c8\u30ec\u30c3\u30c1\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0425\uff05\" },\r\n        { label: \"\u30a6\u30a9\u30fc\u30e0\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0420\uff05\" },\r\n      ],\r\n      price: \"\uffe544,880\",\r\n      modelNumber: \"FBSM-AC5-GMMSC\",\r\n      release: \"2024\u5e744\u6708\",\r\n      tornadoStick: \"\u00d7\\n(\u5225\u58f2)\",\r\n      dimensions: \"172mm\u00d750mm\u00d750mm\",\r\n      headAngle: \"\u30cf\u30f3\u30c9\u30eb\u5782\u76f4\u306b\u5bfe\u305720\u00b0\",\r\n      weight: \"150g\",\r\n      material: \"ABS\u6a39\u8102\\n\u30dd\u30ea\u30ab\u30fc\u30dc\u30cd\u30fc\u30c8\\nPOM\\n\u30b4\u30e0(EPDM)\\n\u30b9\u30c6\u30f3\u30ec\u30b9\\n\u30e1\u30c3\u30ad\",\r\n    },\r\n  },\r\n  {\r\n    id: \"plus\",\r\n    name: \"\u30df\u30e9\u30d6\u30ebPlus\",\r\n    image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hi_06.png\",\r\n    url: \"https:\/\/milky-selections.com\/mirable\/itemall\/item_001\",\r\n    specs: {\r\n      recommendFor: \"\u8efd\u91cf\u3067\u6271\u3044\u3084\u3059\u3044\",\r\n      shortFeature: [\r\n        { label: \"\u8efd\u91cf\", icon: \"feather\" },\r\n        { label: \"\u3084\u3055\u3057\u3044\u808c\u3042\u305f\u308a\", icon: \"gentle\" },\r\n      ],\r\n      effectCleaning: \"\u2605\uff13\",\r\n      effectRange: \"\u2605\uff13\",\r\n      effectSoftness: \"\u2605\uff14\",\r\n      effectPower: \"\u2605\uff13\",\r\n      effectMoisture: \"\u2605\uff13\",\r\n      effectWarmth: \"\u2605\uff13\",\r\n      waterTypes: \"2\u30e2\u30fc\u30c9\",\r\n      waterModes: [\r\n        { name: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\", flow: \"3.5L\/min\", particleType: \"UFB\", particleValue: \"\u7d042000\u4e07\u500b\/cc\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_plus_02.jpg\" },\r\n        { name: \"\u30b9\u30c8\u30ec\u30fc\u30c8\", flow: \"7.5L\/min\", particleType: \"MB\", particleValue: \"\u7d046000\u500b\/cc\", image: \"https:\/\/milky-selections.com\/mirable\/wp-content\/uploads\/2026\/07\/hisui_plus_01.jpg\" },\r\n      ],\r\n      waterAdjust: \"\u30fc\",\r\n      waterSaving: [\r\n        { label: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u6c34\u6d41\", percent: \"\u7d0460\uff05\" },\r\n        { label: \"\u30b9\u30c8\u30ec\u30fc\u30c8\u6c34\u6d41\", percent: \"\u7d0425\uff05\" },\r\n      ],\r\n      price: \"\uffe544,990\",\r\n      modelNumber: \"FBSMP-TSC-CSC\",\r\n      release: \"2019\u5e748\u6708\",\r\n      tornadoStick: \"\u3007\\n(\uff11\u672c\u4ed8\u5c5e)\",\r\n      dimensions: \"\u5168\u9577\u3000\u7d04160mm\uff08\u63a5\u7d9a\u90e8\u9664\u304f\uff09\u00d755\u03c6\\n\u5168\u5e45\u3000\u7d0470mm\uff08\u7a81\u8d77\u90e8\u542b\u3080\uff09\u00d729\u03c6\",\r\n      headAngle: \"\u30cf\u30f3\u30c9\u30eb\u5782\u76f4\u306b\u5bfe\u305770\u00b0\",\r\n      weight: \"162g\",\r\n      material: \"\u672c\u4f53\uff1a\u30dd\u30ea\u30ab\u30fc\u30dc\u30cd\u30fc\u30c8\u53ca\u3073ABS\\n\u30cd\u30b8\u53ca\u3073\u30d0\u30cd\uff1a\u30b9\u30c6\u30f3\u30ec\u30b9\\n\u30d1\u30c3\u30ad\u30f3\uff1aEPDM\",\r\n    },\r\n  },\r\n];\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u4e26\u3079\u66ff\u3048\u6a5f\u80fd\uff1a\u5404\u9805\u76ee\u306e\u6587\u5b57\u5217\u304b\u3089\u300c\u6bd4\u8f03\u7528\u306e\u6570\u5024\u300d\u3092\u53d6\u308a\u51fa\u3059\u30d8\u30eb\u30d1\u30fc\u3002\r\n\/\/ ------------------------------------------------------------------\r\nfunction parseYen(raw) {\r\n  const m = String(raw || \"\").match(\/[\\d,]+\/);\r\n  return m ? parseFloat(m[0].replace(\/,\/g, \"\")) : null;\r\n}\r\nfunction parseGram(raw) {\r\n  const m = String(raw || \"\").match(\/[\\d.]+\/);\r\n  return m ? parseFloat(m[0]) : null;\r\n}\r\nfunction parseYearMonth(raw) {\r\n  const m = String(raw || \"\").match(\/(\\d+)\\s*\u5e74\\s*(\\d+)\\s*\u6708\/);\r\n  return m ? parseInt(m[1], 10) * 100 + parseInt(m[2], 10) : null;\r\n}\r\n\/\/ \u25ce\/\u3007\/\u00d7\/\u30fc \u306e\u3088\u3046\u306a\u8a18\u53f7\u306e1\u6587\u5b57\u76ee\u3092\u53d6\u308a\u51fa\u3059\uff08StatusValue\u3068\u540c\u3058\u8003\u3048\u65b9\uff09\r\nfunction firstSymbolOf(raw) {\r\n  return String(raw || \"\").split(\"\\n\")[0].trim();\r\n}\r\n\/\/ \u300c\u7bc0\u6c34\u6a5f\u80fd\u300d\uff08[{label,percent}] \u306e\u914d\u5217\uff09\u306e\u4e2d\u304b\u3089\u3001\u4e00\u756a\u9ad8\u3044\u30d1\u30fc\u30bb\u30f3\u30c6\u30fc\u30b8\u3092\u53d6\u308a\u51fa\u3059\r\nfunction maxPercentOf(items) {\r\n  if (!items || items.length === 0) return null;\r\n  const nums = items\r\n    .map((item) => {\r\n      const m = String(item.percent || \"\").match(\/[\\d.]+\/);\r\n      return m ? parseFloat(m[0]) : null;\r\n    })\r\n    .filter((n) => n != null);\r\n  return nums.length ? Math.max(...nums) : null;\r\n}\r\n\r\n\/\/ \u300c\u52b9\u679c\u300d\u306e\u2605\u8a55\u4fa1\u306e\u4e26\u3079\u66ff\u3048\u30dc\u30bf\u30f3\uff08\u30a2\u30a4\u30b3\u30f3\u306e\u307f\u3001\u30e9\u30d9\u30eb\u306a\u3057\uff09\u3002\r\n\/\/ 6\u9805\u76ee\u3059\u3079\u3066\u3067\u5171\u901a\u306e\u305f\u3081\u3001\u3053\u3053\u3067\u307e\u3068\u3081\u3066\u5b9a\u7fa9\u3057\u3066\u304a\u304f\u3002\r\n\/\/ \u203bparseStarValue \u306f\u4e0b\u306e\u65b9\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u95a2\u6570\u3060\u304c\u3001function\u5ba3\u8a00\u306f\r\n\/\/   \u5dfb\u304d\u4e0a\u3052\u3089\u308c\u308b\u305f\u3081\u3001\u3053\u3053\u304b\u3089\u53c2\u7167\u3057\u3066\u3082\u554f\u984c\u306a\u3044\u3002\r\nconst STAR_SORT_OPTIONS = [\r\n  {\r\n    id: \"desc\",\r\n    icon: \"asc\",\r\n    title: \"\u591a\u3044\u9806\",\r\n    getValue: (raw) => {\r\n      const v = parseStarValue(raw);\r\n      return v || null;\r\n    },\r\n  },\r\n  {\r\n    id: \"asc\",\r\n    icon: \"desc\",\r\n    title: \"\u5c11\u306a\u3044\u9806\",\r\n    getValue: (raw) => {\r\n      const v = parseStarValue(raw);\r\n      return v ? -v : null;\r\n    },\r\n  },\r\n];\r\n\r\nconst SPEC_ROWS = [\r\n  { key: \"recommendFor\", label: \"\u3053\u3093\u306a\u65b9\u306b\u304a\u3059\u3059\u3081\" },\r\n  { key: \"shortFeature\", label: \"\u7279\u5fb4\", type: \"tags\" },\r\n  {\r\n    key: \"effectCleaning\",\r\n    label: \"\u6d17\u6d44\u529b\",\r\n    type: \"stars\",\r\n    effectFirst: true,\r\n    sortable: STAR_SORT_OPTIONS,\r\n  },\r\n  { key: \"effectRange\", label: \"\u6d17\u6d44\u7bc4\u56f2\", type: \"stars\", sortable: STAR_SORT_OPTIONS },\r\n  { key: \"effectSoftness\", label: \"\u67d4\u3089\u304b\u3055\", type: \"stars\", sortable: STAR_SORT_OPTIONS },\r\n  { key: \"effectPower\", label: \"\u6c34\u306e\u52e2\u3044\", type: \"stars\", sortable: STAR_SORT_OPTIONS },\r\n  { key: \"effectMoisture\", label: \"\u6f64\u3044\", type: \"stars\", sortable: STAR_SORT_OPTIONS },\r\n  {\r\n    key: \"effectWarmth\",\r\n    label: \"\u6e29\u307e\u308a\",\r\n    type: \"stars\",\r\n    effectLast: true,\r\n    sortable: STAR_SORT_OPTIONS,\r\n  },\r\n  { key: \"waterTypes\", label: \"\u6c34\u6d41\u7a2e\u985e\", type: \"number\" },\r\n  {\r\n    key: \"waterModes\",\r\n    label: \"\u6c34\u6d41\u30e2\u30fc\u30c9\",\r\n    note: \"\u203bUFB=\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\uff08\u5e73\u5747\u7c92\u5f84\uff09\u76f4\u5f840.13\u339b\u3000\u203bMB=\u30de\u30a4\u30af\u30ed\u30d0\u30d6\u30eb\uff08\u7d0430\u03bcm\uff09\",\r\n    type: \"slider\",\r\n  },\r\n  {\r\n    key: \"waterAdjust\",\r\n    label: \"\u6c34\u6d41\u8abf\u7bc0\u6a5f\u80fd\",\r\n    type: \"status\",\r\n    sortable: [\r\n      {\r\n        id: \"has\",\r\n        label: \"\u8abf\u7bc0\u6a5f\u80fd\u3042\u308a\",\r\n        shortLabel: \"\u6a5f\u80fd\u3042\u308a\",\r\n        icon: \"desc\",\r\n        getValue: (raw) => {\r\n          const symbol = firstSymbolOf(raw);\r\n          if (symbol === \"\u25ce\") return 2;\r\n          if (symbol === \"\u3007\" || symbol === \"\u25ef\" || symbol === \"\u25cb\") return 1;\r\n          return 0;\r\n        },\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    key: \"waterSaving\",\r\n    label: \"\u7bc0\u6c34\u6a5f\u80fd\",\r\n    type: \"percentList\",\r\n    sortable: [\r\n      {\r\n        id: \"max\",\r\n        label: \"\u9ad8\u3044\u9806\",\r\n        icon: \"desc\",\r\n        getValue: (raw) => maxPercentOf(raw),\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    key: \"price\",\r\n    label: \"\u4fa1\u683c(\u7a0e\u8fbc)\",\r\n    type: \"price\",\r\n    sortable: [\r\n      { id: \"asc\", label: \"\u5b89\u3044\u9806\", icon: \"asc\", getValue: (raw) => { const v = parseYen(raw); return v == null ? null : -v; } },\r\n      { id: \"desc\", label: \"\u9ad8\u3044\u9806\", icon: \"desc\", getValue: (raw) => parseYen(raw) },\r\n    ],\r\n  },\r\n  { key: \"modelNumber\", label: \"\u5546\u54c1\u578b\u756a\" },\r\n  {\r\n    key: \"release\",\r\n    label: \"\u767a\u58f2\",\r\n    type: \"number\",\r\n    sortable: [\r\n      { id: \"desc\", label: \"\u65b0\u3057\u3044\u9806\", icon: \"asc\", getValue: (raw) => parseYearMonth(raw) },\r\n      { id: \"asc\", label: \"\u53e4\u3044\u9806\", icon: \"desc\", getValue: (raw) => { const v = parseYearMonth(raw); return v == null ? null : -v; } },\r\n    ],\r\n  },\r\n  {\r\n    key: \"tornadoStick\",\r\n    label: \"\u30c8\u30eb\u30cd\u30fc\u30c9\u30b9\u30c6\u30a3\u30c3\u30af\u4ed8\u5c5e\",\r\n    type: \"status\",\r\n    sortable: [\r\n      {\r\n        id: \"included\",\r\n        label: \"\u4ed8\u5c5e\u3042\u308a\",\r\n        icon: \"desc\",\r\n        getValue: (raw) => {\r\n          const symbol = firstSymbolOf(raw);\r\n          return symbol === \"\u3007\" || symbol === \"\u25ef\" || symbol === \"\u25cb\" ? 1 : 0;\r\n        },\r\n      },\r\n      {\r\n        id: \"separate\",\r\n        label: \"\u5225\u58f2\",\r\n        icon: \"desc\",\r\n        getValue: (raw) => (firstSymbolOf(raw) === \"\u00d7\" ? 1 : 0),\r\n      },\r\n    ],\r\n  },\r\n  { key: \"dimensions\", label: \"\u672c\u4f53\u5bf8\u6cd5\", type: \"number\" },\r\n  { key: \"headAngle\", label: \"\u30d8\u30c3\u30c9\u89d2\u5ea6\", type: \"number\" },\r\n  {\r\n    key: \"weight\",\r\n    label: \"\u672c\u4f53\u91cd\u91cf\",\r\n    type: \"number\",\r\n    sortable: [\r\n      { id: \"asc\", label: \"\u8efd\u3044\u9806\", icon: \"asc\", getValue: (raw) => { const v = parseGram(raw); return v == null ? null : -v; } },\r\n      { id: \"desc\", label: \"\u91cd\u3044\u9806\", icon: \"desc\", getValue: (raw) => parseGram(raw) },\r\n    ],\r\n  },\r\n  { key: \"material\", label: \"\u6750\u8cea\" },\r\n];\r\n\r\n\/\/ \u7e1e\u6a21\u69d8\uff08\u5947\u6570\u884c\u30fb\u5076\u6570\u884c\uff09\u306e\u5224\u5b9a\u7528\u306b\u3001\u3042\u3089\u304b\u3058\u3081\u300c\u898b\u305f\u76ee\u4e0a\u306e\u884c\u756a\u53f7\u300d\u3092\u8a08\u7b97\u3057\u3066\u304a\u304f\u3002\r\n\/\/ \u300c\u52b9\u679c\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u5b9f\u969b\u306b\u306f6\u884c\u3042\u308b\u304c\u3001\u7e1e\u6a21\u69d8\u306e\u30ab\u30a6\u30f3\u30c8\u3068\u3057\u3066\u306f1\u884c\u5206\u3068\u3057\u3066\u6271\u3046\r\n\/\/ \uff08\u305d\u3046\u3057\u306a\u3044\u3068\u3001\u52b9\u679c\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5f8c\u308d\u306e\u884c\u306e\u7e1e\u6a21\u69d8\u304c\u30ba\u30ec\u3066\u3057\u307e\u3046\u305f\u3081\uff09\u3002\r\nconst SPEC_ROW_VISUAL_INDEX = (() => {\r\n  let counter = -1;\r\n  let prevWasEffect = false;\r\n  return SPEC_ROWS.map((row) => {\r\n    const isEffect = row.type === \"stars\";\r\n    if (isEffect) {\r\n      if (!prevWasEffect) counter++;\r\n    } else {\r\n      counter++;\r\n    }\r\n    prevWasEffect = isEffect;\r\n    return counter;\r\n  });\r\n})();\r\n\r\nconst ACCENT = \"#0E6E76\"; \/\/ \u30d6\u30e9\u30f3\u30c9\u306e\u6c34\u30fb\u6e05\u6f54\u611f\u3092\u610f\u8b58\u3057\u305f\u30c6\u30a3\u30fc\u30eb\r\n\r\n\/\/ \u6bd4\u8f03\u8868\u306e\u5217\u5e45\uff08px\uff09\u306e\u57fa\u6e96\u5024\u3002\r\n\/\/ DEVICE_COL_WIDTH \u306f\u300c\u5546\u54c1\u5217\u306e\u6700\u5c0f\u5e45\u300d\u3067\u3001\u9078\u629e\u53f0\u6570\u304c\u5c11\u306a\u304f\u4f59\u767d\u304c\u3042\u308b\u5834\u5408\u306f\r\n\/\/ \u5b9f\u969b\u306b\u306f\u3053\u308c\u3088\u308a\u5e83\u304f\u5747\u7b49\u306b\u5f15\u304d\u4f38\u3070\u3055\u308c\u307e\u3059\uff08\u30b3\u30f3\u30c6\u30ca\u5e45\u3092\u8d85\u3048\u305f\u3089\u3053\u306e\u5e45\u3067\u56fa\u5b9a\uff06\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\uff09\u3002\r\n\/\/ LABEL_COL_WIDTH \u306f\u300c\u52b9\u679c\u300d\u306e\u7e26\u898b\u51fa\u3057\u5217\u306e\u5e45\uff08\u72ed\u3081\uff09\u3001\r\n\/\/ SUBLABEL_COL_WIDTH \u306f\u300c\u6d17\u6d44\u529b\u300d\u306a\u3069\u306e\u4e2d\u9805\u76ee\u30e9\u30d9\u30eb\u5217\u306e\u5e45\uff08\u5e83\u3081\uff09\u3002\r\n\/\/ \u901a\u5e38\u306e\u884c\u306f\u3053\u306e2\u5217\u3092\u307e\u3068\u3081\u30661\u3064\u306e\u30e9\u30d9\u30eb\u3068\u3057\u3066\u4f7f\u3046\u306e\u3067\u3001\r\n\/\/ 2\u3064\u306e\u5408\u8a08\u5024\u3055\u3048\u5909\u3048\u306a\u3051\u308c\u3070\u3001\u4ed6\u306e\u884c\u306e\u898b\u305f\u76ee\u306b\u306f\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002\r\nconst LABEL_COL_WIDTH = 64;\r\nconst DEVICE_COL_WIDTH = 240;\r\n\r\n\/\/ \u300c\u52b9\u679c\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u4e2d\u9805\u76ee\u30e9\u30d9\u30eb\uff08\u6d17\u6d44\u529b\u3001\u6d17\u6d44\u7bc4\u56f2\u2026\uff09\u7528\u306e\u5217\u5e45\r\nconst SUBLABEL_COL_WIDTH = 164;\r\nconst MOBILE_SUBLABEL_COL_WIDTH = 62; \/\/ \u6298\u308a\u8fd4\u3057OK\u306a\u306e\u3067\u72ed\u3081\u306b\u3057\u3066\u5546\u54c1\u5217\u3092\u512a\u5148\r\n\r\n\/\/ \u30b9\u30de\u30db\u5e45\uff08640px\u4ee5\u4e0b\uff09\u306e\u3068\u304d\u306f\u3001\u753b\u9762\u5185\u306b\u306a\u308b\u3079\u304f\u591a\u304f\u306e\u5546\u54c1\u5217\u304c\r\n\/\/ \u53ce\u307e\u308b\u3088\u3046\u306b\u3001\u4e0a\u8a18\u3088\u308a\u72ed\u3044\u5024\u3092\u4f7f\u3046\u3002\r\nconst MOBILE_LABEL_COL_WIDTH = 26; \/\/ \u300c\u52b9\u679c\u300d\u306e\u7e26\u898b\u51fa\u3057\u304c\u304e\u308a\u304e\u308a\u53ce\u307e\u308b\u5e45\r\nconst MOBILE_DEVICE_COL_WIDTH = 168;\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u5c0f\u3055\u306a\u30a2\u30a4\u30b3\u30f3\uff08\u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3057\u306e\u30a4\u30f3\u30e9\u30a4\u30f3SVG\uff09\r\n\/\/ ------------------------------------------------------------------\r\nfunction CheckIcon({ size = 12, color = \"currentColor\" }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <polyline points=\"20 6 9 17 4 12\" \/>\r\n    <\/svg>\r\n  );\r\n}\r\nfunction XIcon({ size = 10, color = \"currentColor\" }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" \/>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" \/>\r\n    <\/svg>\r\n  );\r\n}\r\nfunction DropletIcon({ size = 28, color = \"currentColor\" }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n      <path d=\"M12 2.5C12 2.5 5 11 5 15.5A7 7 0 0 0 19 15.5C19 11 12 2.5 12 2.5Z\" \/>\r\n    <\/svg>\r\n  );\r\n}\r\n\r\nfunction Thumb({ device, size = 64, selected = false, className = \"\" }) {\r\n  return (\r\n    <div\r\n      className={`flex items-center justify-center rounded-xl shrink-0 overflow-hidden bg-white ${className}`}\r\n      style={{\r\n        width: size,\r\n        height: size,\r\n        border: selected ? \"1px solid rgba(255,255,255,0.5)\" : \"1px solid #E7E9E8\",\r\n      }}\r\n    >\r\n      <img\r\n        src={device.image}\r\n        alt={device.name}\r\n        className=\"w-full h-full object-contain p-1\"\r\n        loading=\"lazy\"\r\n        onError={(e) => {\r\n          e.target.style.display = \"none\";\r\n          e.target.parentElement.innerHTML =\r\n            '<span style=\"font-size:10px;color:#9AA3A2;\">No Image<\/span>';\r\n        }}\r\n      \/>\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u300c\u52b9\u679c\u300d\u306e\u8a55\u4fa1\uff08\u4f8b\uff1a\"\u26054.5\"\uff09\u3092\u661f\u30a2\u30a4\u30b3\u30f3\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30d8\u30eb\u30d1\u30fc\r\n\/\/ ------------------------------------------------------------------\r\nfunction parseStarValue(raw) {\r\n  if (!raw) return 0;\r\n  const fullToHalf = (s) =>\r\n    s.replace(\/[\uff10-\uff19]\/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 0xfee0));\r\n  const cleaned = fullToHalf(String(raw).replace(\"\u2605\", \"\").trim());\r\n  const num = parseFloat(cleaned);\r\n  return isNaN(num) ? 0 : Math.max(0, Math.min(5, num));\r\n}\r\n\r\n\/\/ \u5c11\u3057\u5927\u304d\u3081\u3067\u89d2\u3092\u4e38\u3081\u305f\u3001\u66f2\u7dda\u7684\u306a\u661f\u30a2\u30a4\u30b3\u30f3\r\nconst STAR_PATH =\r\n  \"M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.47L12 16.9l-5.8 3.47 1.11-6.47-4.7-4.58 6.49-.94L12 2.5z\";\r\n\r\nfunction StarIcon({ size = 20, color = \"currentColor\" }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 24 24\" style={{ display: \"block\" }}>\r\n      <path\r\n        d={STAR_PATH}\r\n        fill={color}\r\n        stroke={color}\r\n        strokeWidth=\"1.4\"\r\n        strokeLinejoin=\"round\"\r\n        strokeLinecap=\"round\"\r\n      \/>\r\n    <\/svg>\r\n  );\r\n}\r\n\r\nfunction StarRating({ value }) {\r\n  const numeric = parseStarValue(value);\r\n  if (!numeric) return <span>\u30fc<\/span>;\r\n  return (\r\n    <span className=\"spec-star-rating\" title={`${numeric} \/ 5`}>\r\n      {[0, 1, 2, 3, 4].map((i) => {\r\n        const fillPct = Math.max(0, Math.min(1, numeric - i)) * 100;\r\n        return (\r\n          <span key={i} className=\"spec-star-single\">\r\n            <StarIcon color=\"#E3E6E1\" \/>\r\n            <span className=\"spec-star-single-fill\" style={{ width: `${fillPct}%` }}>\r\n              <StarIcon color=\"#F4B400\" \/>\r\n            <\/span>\r\n          <\/span>\r\n        );\r\n      })}\r\n    <\/span>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u300c\u7279\u5fb4\u300d\u30bf\u30b0\u7528\u306e\u30a2\u30a4\u30b3\u30f3\uff08\u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3057\u306e\u30a4\u30f3\u30e9\u30a4\u30f3SVG\uff09\r\n\/\/ ------------------------------------------------------------------\r\nfunction TagIcon({ icon, size = 15, color = \"#5AA9E6\" }) {\r\n  const common = { width: size, height: size, viewBox: \"0 0 24 24\", style: { display: \"block\", flexShrink: 0 } };\r\n  switch (icon) {\r\n    case \"sparkle\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M12 3l1.6 4.8L18 9.5l-4.4 1.7L12 16l-1.6-4.8L6 9.5l4.4-1.7L12 3z\" \/>\r\n          <path d=\"M19 15l.8 2.3 2.2.9-2.2.9L19 21l-.8-2.3-2.2-.9 2.2-.9L19 15z\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"shower\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M12 3a5 5 0 0 1 5 5H7a5 5 0 0 1 5-5z\" \/>\r\n          <rect x=\"4\" y=\"8.6\" width=\"16\" height=\"3.2\" rx=\"1.6\" \/>\r\n          <circle cx=\"7\" cy=\"16.2\" r=\"1.3\" \/>\r\n          <circle cx=\"12\" cy=\"17.6\" r=\"1.3\" \/>\r\n          <circle cx=\"17\" cy=\"16.2\" r=\"1.3\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"droplet\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M12 3s6 6.5 6 10.5a6 6 0 0 1-12 0C6 9.5 12 3 12 3z\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"pause\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <rect x=\"7\" y=\"5\" width=\"3.2\" height=\"14\" rx=\"1.4\" \/>\r\n          <rect x=\"13.8\" y=\"5\" width=\"3.2\" height=\"14\" rx=\"1.4\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"hand\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M8 21c-1.9 0-3.4-1.5-3.4-3.4v-3.5c0-.5.2-1 .5-1.3l.9-1c.4-.4 1.1-.5 1.6-.2.4.2.6.6.6 1.1v.7h.3V7a1.4 1.4 0 0 1 2.8 0v5.7h.3V6a1.4 1.4 0 0 1 2.8 0v6.7h.3V7.6a1.4 1.4 0 0 1 2.8 0V16c0 2.8-2.2 5-5 5H8z\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"clock\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <circle cx=\"12\" cy=\"12\" r=\"9\" \/>\r\n          <rect x=\"11.1\" y=\"6.3\" width=\"1.8\" height=\"6.3\" rx=\"0.9\" fill=\"#FFFFFF\" \/>\r\n          <rect\r\n            x=\"12\"\r\n            y=\"11.1\"\r\n            width=\"5.2\"\r\n            height=\"1.8\"\r\n            rx=\"0.9\"\r\n            fill=\"#FFFFFF\"\r\n            transform=\"rotate(35 12 12)\"\r\n          \/>\r\n        <\/svg>\r\n      );\r\n    case \"humidity\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M9 3s5 5.2 5 8.4a5 5 0 0 1-10 0C4 8.2 9 3 9 3z\" \/>\r\n          <path d=\"M18.5 12.5s3 3.1 3 5a3 3 0 0 1-6 0c0-1.9 3-5 3-5z\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"gentle\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M2 12.3c1.6-2.6 3.7-2.6 5.3-.3.2.3.5.5.7.8.5.6 1.3.6 1.8 0 .2-.3.5-.5.7-.8 1.6-2.3 3.7-2.3 5.3.3s3.7 2.6 5.3.3v3c-1.6 2.3-3.7 2.3-5.3-.3-.2-.3-.5-.5-.7-.8-.5-.6-1.3-.6-1.8 0-.2.3-.5.5-.7.8-1.6 2.6-3.7 2.6-5.3.3s-3.7-2.6-5.3-.3v-3z\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"age\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M12 2.5l7.5 3v5.5c0 5-3.2 8.6-7.5 10-4.3-1.4-7.5-5-7.5-10V5.5l7.5-3z\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"feather\":\r\n      return (\r\n        <svg {...common} fill={color}>\r\n          <path d=\"M20 4c-6.5 0-15 4.3-15 13 0 2.2 1.4 3.6 3.6 3.6C17.3 20.6 20 11.6 20 5V4z\" \/>\r\n          <rect\r\n            x=\"8.2\"\r\n            y=\"16.9\"\r\n            width=\"12\"\r\n            height=\"1.8\"\r\n            rx=\"0.9\"\r\n            transform=\"rotate(-45 8.2 16.9)\"\r\n          \/>\r\n        <\/svg>\r\n      );\r\n    default:\r\n      return null;\r\n  }\r\n}\r\n\r\nfunction FeatureTagList({ tags }) {\r\n  if (!tags || tags.length === 0) return <span>\u30fc<\/span>;\r\n  return (\r\n    <div className=\"spec-feature-tag-list\">\r\n      {tags.map((tag, i) => (\r\n        <span key={i} className=\"spec-feature-tag\">\r\n          {tag.isNew ? (\r\n            <span className=\"spec-feature-tag-new\">NEW<\/span>\r\n          ) : (\r\n            <TagIcon icon={tag.icon} \/>\r\n          )}\r\n          <span>{tag.label}<\/span>\r\n        <\/span>\r\n      ))}\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u300c\u6c34\u6d41\u30e2\u30fc\u30c9\u300d\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\uff08\u77e2\u5370\u3067\u5207\u308a\u66ff\u3048\u3001\u753b\u50cf\u306e\u4e0a\u306b\u30e2\u30fc\u30c9\u540d\u3092\u8868\u793a\uff09\r\n\/\/ ------------------------------------------------------------------\r\nfunction ChevronIcon({ direction = \"left\", size = 14 }) {\r\n  const points =\r\n    direction === \"left\" ? \"14 3 6 10 14 17\" : \"6 3 14 10 6 17\";\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 20 20\" fill=\"none\">\r\n      <polyline\r\n        points={points}\r\n        stroke=\"#FFFFFF\"\r\n        strokeWidth=\"2.2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      \/>\r\n    <\/svg>\r\n  );\r\n}\r\n\r\n\/\/ \u4e26\u3079\u66ff\u3048\u30dc\u30bf\u30f3\u306e\u524d\u306b\u4ed8\u3051\u308b\u5c0f\u3055\u306a\u77e2\u5370\u30a2\u30a4\u30b3\u30f3\uff08\u6607\u9806\/\u964d\u9806\uff09\r\nfunction SortIcon({ dir = \"asc\", size = 10, color = \"currentColor\" }) {\r\n  const points = dir === \"asc\" ? \"2 8 6 2 10 8\" : \"2 2 6 8 10 2\";\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 12 10\" fill=\"none\">\r\n      <polyline\r\n        points={points}\r\n        stroke={color}\r\n        strokeWidth=\"1.6\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      \/>\r\n    <\/svg>\r\n  );\r\n}\r\n\r\n\/\/ \u5b9f\u969b\u306e\u6c34\u6d41\u30e2\u30fc\u30c9\u3054\u3068\u306e\u5199\u771f\u304c\u672a\u8a2d\u5b9a\u306e\u5834\u5408\u306b\u8868\u793a\u3059\u308b\u3001\u6c4e\u7528\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\r\n\/\/ \u30a4\u30e9\u30b9\u30c8\uff08\u30b7\u30e3\u30ef\u30fc\u304b\u3089\u6c34\u304c\u51fa\u3066\u3044\u308b\u30a4\u30e1\u30fc\u30b8\uff09\u3002mode.image \u306bURL\u3092\u6307\u5b9a\u3059\u308c\u3070\r\n\/\/ \u305d\u3061\u3089\u304c\u512a\u5148\u3057\u3066\u8868\u793a\u3055\u308c\u308b\u3002\r\nfunction WaterModePlaceholder() {\r\n  return (\r\n    <svg viewBox=\"0 0 200 130\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid slice\">\r\n      <rect width=\"200\" height=\"130\" fill=\"#2B3138\" \/>\r\n      <circle cx=\"60\" cy=\"40\" r=\"16\" fill=\"#3A424C\" \/>\r\n      <g stroke=\"#8FB8D6\" strokeWidth=\"2\" strokeLinecap=\"round\" opacity=\"0.8\">\r\n        <line x1=\"70\" y1=\"46\" x2=\"150\" y2=\"90\" \/>\r\n        <line x1=\"74\" y1=\"40\" x2=\"158\" y2=\"78\" \/>\r\n        <line x1=\"66\" y1=\"52\" x2=\"140\" y2=\"100\" \/>\r\n        <line x1=\"72\" y1=\"54\" x2=\"146\" y2=\"108\" \/>\r\n        <line x1=\"64\" y1=\"44\" x2=\"148\" y2=\"86\" \/>\r\n      <\/g>\r\n      <circle cx=\"60\" cy=\"40\" r=\"9\" fill=\"#C9D8E3\" \/>\r\n    <\/svg>\r\n  );\r\n}\r\n\r\nfunction WaterModeSlider({ modes }) {\r\n  const [index, setIndex] = useState(0);\r\n  if (!modes || modes.length === 0) return <span>\u30fc<\/span>;\r\n  const mode = modes[Math.min(index, modes.length - 1)];\r\n\r\n  const goPrev = (e) => {\r\n    e.stopPropagation();\r\n    setIndex((i) => (i - 1 + modes.length) % modes.length);\r\n  };\r\n  const goNext = (e) => {\r\n    e.stopPropagation();\r\n    setIndex((i) => (i + 1) % modes.length);\r\n  };\r\n\r\n  \/\/ \u6c34\u6d41\u540d\u306e\u6587\u5b57\u6570\u306b\u5fdc\u3058\u3066\u3001\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3068\u5b57\u9593\u3092\u81ea\u52d5\u3067\u5c11\u3057\u7e2e\u3081\u308b\u3002\r\n  \/\/ \u3053\u308c\u306b\u3088\u308a\u540d\u524d\u304c\u9577\u304f\u3066\u30822\u6bb5\u306b\u306a\u3089\u305a\u3001\u5fc5\u305a1\u884c\u306b\u53ce\u307e\u308b\u3002\r\n  const nameLength = mode.name ? mode.name.length : 0;\r\n  const labelFontSize = Math.max(7.5, Math.min(10.5, 112 \/ Math.max(nameLength, 1)));\r\n  const labelLetterSpacing = nameLength > 9 ? -0.02 : 0;\r\n\r\n  return (\r\n    <div className=\"spec-watermode\">\r\n      <div className=\"spec-watermode-image-wrap\">\r\n        {mode.image ? (\r\n          <img src={mode.image} alt={mode.name} className=\"spec-watermode-image\" \/>\r\n        ) : (\r\n          <WaterModePlaceholder \/>\r\n        )}\r\n        <span\r\n          className=\"spec-watermode-label\"\r\n          style={{ fontSize: `${labelFontSize}px`, letterSpacing: `${labelLetterSpacing}em` }}\r\n        >\r\n          {mode.name}\r\n        <\/span>\r\n        {modes.length > 1 && (\r\n          <>\r\n            <button\r\n              type=\"button\"\r\n              onClick={goPrev}\r\n              className=\"spec-watermode-arrow spec-watermode-arrow-prev\"\r\n              aria-label=\"\u524d\u306e\u6c34\u6d41\u30e2\u30fc\u30c9\"\r\n            >\r\n              <ChevronIcon direction=\"left\" \/>\r\n            <\/button>\r\n            <button\r\n              type=\"button\"\r\n              onClick={goNext}\r\n              className=\"spec-watermode-arrow spec-watermode-arrow-next\"\r\n              aria-label=\"\u6b21\u306e\u6c34\u6d41\u30e2\u30fc\u30c9\"\r\n            >\r\n              <ChevronIcon direction=\"right\" \/>\r\n            <\/button>\r\n            <span className=\"spec-watermode-dots\">\r\n              {modes.map((_, i) => (\r\n                <span\r\n                  key={i}\r\n                  className={`spec-watermode-dot ${i === index ? \"is-active\" : \"\"}`}\r\n                \/>\r\n              ))}\r\n            <\/span>\r\n          <\/>\r\n        )}\r\n      <\/div>\r\n      <div className=\"spec-watermode-stats\">\r\n        <div>\u5410\u6c34\u91cf\u3000{mode.flow}<\/div>\r\n        <div>\r\n          {mode.particleType}\u3000{mode.particleValue}\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u300c\u6c34\u6d41\u8abf\u7bc0\u6a5f\u80fd\u300d\u300c\u30c8\u30eb\u30cd\u30fc\u30c9\u30b9\u30c6\u30a3\u30c3\u30af\u4ed8\u5c5e\u300d\u306e\u8a18\u53f7\uff08\u25ce\/\u3007\/\u00d7\/\u30fc\uff09\u3092\r\n\/\/ \u5927\u304d\u3081\u306e\u30a2\u30a4\u30b3\u30f3\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\/\/ ------------------------------------------------------------------\r\nfunction StatusIcon({ symbol, size = 30 }) {\r\n  const STATUS_COLOR = \"#5AA9E6\"; \/\/ \u7279\u5fb4\u30bf\u30b0\u306e\u30a2\u30a4\u30b3\u30f3\u3068\u540c\u3058\u6c34\u8272\r\n  const common = { width: size, height: size, viewBox: \"0 0 24 24\" };\r\n  switch (symbol) {\r\n    case \"\u25ce\":\r\n      \/\/ \u4e8c\u91cd\u4e38\uff1a\u3057\u3063\u304b\u308a\u5bfe\u5fdc\uff08\u5185\u5074\u3082\u7dda\u306e\u307f\uff09\r\n      return (\r\n        <svg {...common} fill=\"none\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"9.5\" stroke={STATUS_COLOR} strokeWidth=\"2\" \/>\r\n          <circle cx=\"12\" cy=\"12\" r=\"5\" stroke={STATUS_COLOR} strokeWidth=\"2\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"\u3007\":\r\n    case \"\u25ef\":\r\n    case \"\u25cb\":\r\n      \/\/ \u4e00\u91cd\u4e38\uff1a\u5bfe\u5fdc\r\n      return (\r\n        <svg {...common} fill=\"none\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke={STATUS_COLOR} strokeWidth=\"2.4\" \/>\r\n        <\/svg>\r\n      );\r\n    case \"\u00d7\":\r\n      \/\/ \u00d7\uff1a\u975e\u5bfe\u5fdc\r\n      return (\r\n        <svg {...common} fill=\"none\">\r\n          <line x1=\"6.5\" y1=\"6.5\" x2=\"17.5\" y2=\"17.5\" stroke=\"#C7CBCA\" strokeWidth=\"2.4\" strokeLinecap=\"round\" \/>\r\n          <line x1=\"17.5\" y1=\"6.5\" x2=\"6.5\" y2=\"17.5\" stroke=\"#C7CBCA\" strokeWidth=\"2.4\" strokeLinecap=\"round\" \/>\r\n        <\/svg>\r\n      );\r\n    default:\r\n      \/\/ \u30fc\uff1a\u5bfe\u8c61\u5916\u30fb\u60c5\u5831\u306a\u3057\r\n      return (\r\n        <svg {...common} fill=\"none\">\r\n          <line x1=\"6\" y1=\"12\" x2=\"18\" y2=\"12\" stroke=\"#C7CBCA\" strokeWidth=\"2.4\" strokeLinecap=\"round\" \/>\r\n        <\/svg>\r\n      );\r\n  }\r\n}\r\n\r\nfunction StatusValue({ value }) {\r\n  if (!value) return <span>\u30fc<\/span>;\r\n  const lines = String(value).split(\"\\n\");\r\n  const symbol = lines[0].trim();\r\n  const note = lines.slice(1).join(\"\\n\");\r\n  return (\r\n    <div className=\"spec-status-value\">\r\n      <StatusIcon symbol={symbol} \/>\r\n      {note && <div className=\"spec-status-note\">{note}<\/div>}\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u6570\u5b57\uff08\u304a\u3088\u3073\u30ab\u30f3\u30de\u30fb\u5c0f\u6570\u70b9\uff09\u306e\u90e8\u5206\u3060\u3051\u3092\u3072\u3068\u307e\u308f\u308a\u5927\u304d\u304f\u30fb\u592a\u304f\u8868\u793a\u3059\u308b\r\n\/\/ \u5171\u901a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3002\u300c\u7d04\u300d\u300c\uff05\u300d\u300c\uffe5\u300d\u306a\u3069\u306e\u8a18\u53f7\u30fb\u5358\u4f4d\u306f\u5c11\u3057\u5c0f\u3055\u3081\u306e\u307e\u307e\u3002\r\n\/\/ ------------------------------------------------------------------\r\nfunction NumberEmphasis({ text, variant = \"percent\" }) {\r\n  const parts = String(text).split(\/([0-9,.]+)\/g).filter((p) => p !== \"\");\r\n  return (\r\n    <span className={`spec-number spec-number-${variant}`}>\r\n      {parts.map((part, i) =>\r\n        \/^[0-9,.]+$\/.test(part) ? (\r\n          <span key={i} className=\"spec-number-digit\">\r\n            {part}\r\n          <\/span>\r\n        ) : (\r\n          <span key={i} className=\"spec-number-unit\">\r\n            {part}\r\n          <\/span>\r\n        )\r\n      )}\r\n    <\/span>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u300c\u7bc0\u6c34\u6a5f\u80fd\u300d\uff1a\u30e2\u30fc\u30c9\u540d\uff1a\u7d04\u25ef\uff05 \u30921\u884c\u3067\u8868\u793a\uff08\u6570\u5b57\u3060\u3051\u5f37\u8abf\uff09\r\n\/\/ ------------------------------------------------------------------\r\nfunction PercentList({ items }) {\r\n  if (!items || items.length === 0) return <span>\u30fc<\/span>;\r\n  return (\r\n    <div className=\"spec-percent-list\">\r\n      {items.map((item, i) => (\r\n        <div key={i} className=\"spec-percent-row\">\r\n          <span className=\"spec-percent-label\">{item.label}<\/span>\r\n          <NumberEmphasis text={item.percent} variant=\"percent\" \/>\r\n        <\/div>\r\n      ))}\r\n    <\/div>\r\n  );\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------\r\n\/\/ \u300c\u4fa1\u683c(\u7a0e\u8fbc)\u300d\uff1a\u6570\u5b57\u3092\u5927\u304d\u304f\u5f37\u8abf\r\n\/\/ ------------------------------------------------------------------\r\nfunction PriceValue({ value }) {\r\n  if (!value) return <span>\u30fc<\/span>;\r\n  return <NumberEmphasis text={value} variant=\"price\" \/>;\r\n}\r\n\r\nfunction SpecComparison() {\r\n  const [selectedIds, setSelectedIds] = useState([DEVICES[0].id, DEVICES[1].id]);\r\n\r\n  const selectedDevices = useMemo(\r\n    () => selectedIds.map((id) => DEVICES.find((d) => d.id === id)).filter(Boolean),\r\n    [selectedIds]\r\n  );\r\n\r\n  const toggleDevice = (id) => {\r\n    setSelectedIds((prev) =>\r\n      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]\r\n    );\r\n  };\r\n\r\n  const clearAll = () => setSelectedIds([]);\r\n\r\n  \/\/ ---- \u4e26\u3079\u66ff\u3048\u6a5f\u80fd ----\r\n  \/\/ \u9078\u629e\u81ea\u4f53\uff08selectedIds\uff09\u306f\u5909\u3048\u305a\u3001\u8868\u306e\u5217\u306e\u4e26\u3073\u9806\u3060\u3051\u3092\u5909\u3048\u308b\u3002\r\n  \/\/ \u5404\u9805\u76ee(row)\u306e sortable \u914d\u5217\u306b\u5b9a\u7fa9\u3055\u308c\u305f getValue() \u306e\u5024\u304c\r\n  \/\/ \u5927\u304d\u3044\u9806\uff08\u964d\u9806\uff09\u306b\u4e26\u3076\u3088\u3046\u7d71\u4e00\u3057\u3066\u3044\u308b\uff08\u300c\u5b89\u3044\u9806\u300d\u306a\u3069\u306f getValue \u5074\u3067\r\n  \/\/ \u5024\u3092\u30de\u30a4\u30ca\u30b9\u306b\u3059\u308b\u3053\u3068\u3067\u3001\u964d\u9806\u30bd\u30fc\u30c8\u306e\u307e\u307e\u6607\u9806\u306e\u898b\u305f\u76ee\u3092\u5b9f\u73fe\u3057\u3066\u3044\u308b\uff09\u3002\r\n  const [sortField, setSortField] = useState(null);\r\n  const [sortOptionId, setSortOptionId] = useState(null);\r\n\r\n  const handleSort = (fieldKey, optionId) => {\r\n    if (sortField === fieldKey && sortOptionId === optionId) {\r\n      \/\/ \u540c\u3058\u30dc\u30bf\u30f3\u3092\u3082\u3046\u4e00\u5ea6\u62bc\u3057\u305f\u3089\u4e26\u3079\u66ff\u3048\u89e3\u9664\r\n      setSortField(null);\r\n      setSortOptionId(null);\r\n    } else {\r\n      setSortField(fieldKey);\r\n      setSortOptionId(optionId);\r\n    }\r\n  };\r\n\r\n  const sortedDevices = useMemo(() => {\r\n    if (!sortField || !sortOptionId) return selectedDevices;\r\n    const rowConfig = SPEC_ROWS.find((r) => r.key === sortField);\r\n    const option =\r\n      rowConfig && rowConfig.sortable && rowConfig.sortable.find((o) => o.id === sortOptionId);\r\n    if (!option) return selectedDevices;\r\n    const withValue = selectedDevices.map((device) => ({\r\n      device,\r\n      value: option.getValue(device.specs[sortField]),\r\n    }));\r\n    withValue.sort((a, b) => {\r\n      if (a.value == null && b.value == null) return 0;\r\n      if (a.value == null) return 1;\r\n      if (b.value == null) return -1;\r\n      return b.value - a.value;\r\n    });\r\n    return withValue.map((x) => x.device);\r\n  }, [selectedDevices, sortField, sortOptionId]);\r\n\r\n  \/\/ ---- \u30c9\u30e9\u30c3\u30b0\u3067\u7e26\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb ----\r\n  const scrollRef = useRef(null);\r\n  const dragState = useRef({ isDragging: false, startX: 0, startY: 0, scrollLeft: 0, scrollTop: 0 });\r\n\r\n  \/\/ ---- \u30b3\u30f3\u30c6\u30ca\u5e45\u3092\u6e2c\u5b9a\u3057\u3001\u5217\u5e45\u3092\u300c\u4f59\u88d5\u304c\u3042\u308c\u3070\u5747\u7b49\u306b\u4f38\u3070\u3059\uff0f\u306a\u3051\u308c\u3070\u56fa\u5b9a\u300d\u3067\u8a08\u7b97 ----\r\n  const [containerWidth, setContainerWidth] = useState(0);\r\n  const [isMobile, setIsMobile] = useState(false);\r\n\r\n  useEffect(() => {\r\n    if (typeof window === \"undefined\" || !window.matchMedia) return;\r\n    const mql = window.matchMedia(\"(max-width: 640px)\");\r\n    const update = () => setIsMobile(mql.matches);\r\n    update();\r\n    mql.addEventListener ? mql.addEventListener(\"change\", update) : mql.addListener(update);\r\n    return () => {\r\n      mql.removeEventListener ? mql.removeEventListener(\"change\", update) : mql.removeListener(update);\r\n    };\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    const el = scrollRef.current;\r\n    if (!el || typeof ResizeObserver === \"undefined\") return;\r\n    const observer = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        setContainerWidth(entry.contentRect.width);\r\n      }\r\n    });\r\n    observer.observe(el);\r\n    return () => observer.disconnect();\r\n  }, [selectedDevices.length]);\r\n\r\n  const labelColWidth = isMobile ? MOBILE_LABEL_COL_WIDTH : LABEL_COL_WIDTH;\r\n  const subLabelColWidth = isMobile ? MOBILE_SUBLABEL_COL_WIDTH : SUBLABEL_COL_WIDTH;\r\n  const deviceMinColWidth = isMobile ? MOBILE_DEVICE_COL_WIDTH : DEVICE_COL_WIDTH;\r\n\r\n  const deviceColWidth =\r\n    containerWidth > 0 && selectedDevices.length > 0\r\n      ? Math.max(\r\n          deviceMinColWidth,\r\n          Math.floor((containerWidth - labelColWidth - subLabelColWidth) \/ selectedDevices.length)\r\n        )\r\n      : deviceMinColWidth;\r\n  const tableTotalWidth = labelColWidth + subLabelColWidth + deviceColWidth * selectedDevices.length;\r\n\r\n  const handlePointerDown = useCallback((e) => {\r\n    const el = scrollRef.current;\r\n    if (!el) return;\r\n    dragState.current = {\r\n      isDragging: true,\r\n      startX: e.pageX,\r\n      startY: e.pageY,\r\n      scrollLeft: el.scrollLeft,\r\n      scrollTop: el.scrollTop,\r\n    };\r\n    el.classList.add(\"is-dragging\");\r\n  }, []);\r\n\r\n  const endDrag = useCallback(() => {\r\n    const el = scrollRef.current;\r\n    dragState.current.isDragging = false;\r\n    if (el) {\r\n      el.classList.remove(\"is-dragging\");\r\n    }\r\n  }, []);\r\n\r\n  const handlePointerMove = useCallback((e) => {\r\n    const el = scrollRef.current;\r\n    if (!el || !dragState.current.isDragging) return;\r\n    e.preventDefault();\r\n    const dx = e.pageX - dragState.current.startX;\r\n    const dy = e.pageY - dragState.current.startY;\r\n    el.scrollLeft = dragState.current.scrollLeft - dx;\r\n    el.scrollTop = dragState.current.scrollTop - dy;\r\n  }, []);\r\n\r\n  return (\r\n    <div id=\"mirable-spec-widget\" className=\"mirable-spec-app font-sans\">\r\n      <div className=\"max-w-6xl mx-auto px-4 py-8 md:py-12\">\r\n        {\/* \u30d8\u30c3\u30c0\u30fc *\/}\r\n        <header className=\"mb-8\">\r\n          <div\r\n            className=\"flex items-center gap-2 text-[11px] tracking-[0.2em] font-semibold uppercase mb-2\"\r\n            style={{ color: ACCENT }}\r\n          >\r\n            Spec Comparison\r\n          <\/div>\r\n          <h1 className=\"text-2xl md:text-3xl font-bold text-[#1B1F23] tracking-tight\">\r\n            \u30df\u30e9\u30d6\u30eb \u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u6bd4\u8f03\u8868\r\n          <\/h1>\r\n          <p className=\"text-sm text-[#5B6570] mt-2 leading-relaxed\">\r\n            \u4e0b\u306e\u5546\u54c1\u3092\u30bf\u30c3\u30d7\u3057\u3066\u9078\u629e\u3059\u308b\u3068\u3001\u4e0b\u90e8\u306e\u6bd4\u8f03\u8868\u306b\u53cd\u6620\u3055\u308c\u307e\u3059\u3002\u9078\u629e\u6570\u306e\u4e0a\u9650\u306f\u3042\u308a\u307e\u305b\u3093\u3002\r\n          <\/p>\r\n        <\/header>\r\n\r\n        {\/* \u9078\u629e\u72b6\u6cc1\u30d0\u30fc *\/}\r\n        <div className=\"flex items-center justify-between mb-4 sticky top-0 z-10 py-2\">\r\n          <div className=\"text-sm text-[#1B1F23]\">\r\n            <span className=\"font-bold text-base\" style={{ color: ACCENT }}>{selectedDevices.length}<\/span>\r\n            <span className=\"text-[#5B6570]\"> \u53f0 \u9078\u629e\u4e2d<\/span>\r\n          <\/div>\r\n          <button\r\n            onClick={clearAll}\r\n            disabled={selectedDevices.length === 0}\r\n            className=\"spec-clear-all-btn text-xs font-medium px-3 py-1.5 rounded-full text-[#5B6570] hover:border-current hover:text-current transition-colors disabled:opacity-40\"\r\n            style={{ [\"--tw-text-opacity\"]: 1 }}\r\n            onMouseEnter={(e) => { e.currentTarget.style.color = ACCENT; e.currentTarget.style.borderColor = ACCENT; }}\r\n            onMouseLeave={(e) => { e.currentTarget.style.color = \"\"; e.currentTarget.style.borderColor = \"\"; }}\r\n          >\r\n            \u3059\u3079\u3066\u89e3\u9664\r\n          <\/button>\r\n        <\/div>\r\n\r\n        {\/* \u5546\u54c1\u9078\u629e\u30b0\u30ea\u30c3\u30c9 *\/}\r\n        <div className=\"grid grid-cols-3 md:grid-cols-6 gap-2 sm:gap-3 mb-10\">\r\n          {DEVICES.map((device) => {\r\n            const isSelected = selectedIds.includes(device.id);\r\n            return (\r\n              <button\r\n                key={device.id}\r\n                onClick={() => toggleDevice(device.id)}\r\n                className={`spec-grid-card relative flex flex-col items-center gap-1.5 sm:gap-2 rounded-xl sm:rounded-2xl p-2 sm:p-4 text-center transition-colors cursor-pointer\r\n                  ${isSelected\r\n                    ? \"spec-grid-card--selected\"\r\n                    : \"bg-white hover:bg-[#FAFBF9]\"}\r\n                `}\r\n                style={isSelected ? { backgroundColor: ACCENT } : undefined}\r\n              >\r\n                {isSelected && (\r\n                  <span\r\n                    className=\"absolute top-1.5 right-1.5 sm:top-2 sm:right-2 flex items-center justify-center w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-white\"\r\n                    style={{ color: ACCENT }}\r\n                  >\r\n                    <CheckIcon size={10} \/>\r\n                  <\/span>\r\n                )}\r\n                <Thumb device={device} selected={isSelected} size={64} className=\"spec-grid-thumb\" \/>\r\n                <div\r\n                  className={`text-[10.5px] sm:text-[12px] leading-snug font-medium line-clamp-2 ${\r\n                    isSelected ? \"text-white\" : \"text-[#1B1F23]\"\r\n                  }`}\r\n                >\r\n                  {device.name}\r\n                <\/div>\r\n                <div className={`text-[10px] sm:text-[11px] font-semibold ${isSelected ? \"text-white\/85\" : \"\"}`} style={!isSelected ? { color: ACCENT } : undefined}>\r\n                  <NumberEmphasis text={device.specs.price} variant=\"plain\" \/>\r\n                <\/div>\r\n              <\/button>\r\n            );\r\n          })}\r\n        <\/div>\r\n\r\n        {\/* \u6bd4\u8f03\u8868 *\/}\r\n        <section className=\"-mx-4 sm:mx-0\">\r\n          <div className=\"flex items-center gap-2 mb-3 px-4 sm:px-0\">\r\n            <div className=\"h-px flex-1 bg-[#D7DBD6]\" \/>\r\n            <span className=\"text-[11px] tracking-[0.2em] text-[#8A9089] uppercase\">Compare<\/span>\r\n            <div className=\"h-px flex-1 bg-[#D7DBD6]\" \/>\r\n          <\/div>\r\n\r\n          {selectedDevices.length === 0 ? (\r\n            <div className=\"mx-4 sm:mx-0 flex flex-col items-center justify-center gap-3 py-16 rounded-2xl border border-dashed border-[#D7DBD6] text-[#8A9089]\">\r\n              <DropletIcon size={28} \/>\r\n              <p className=\"text-sm\">\u6bd4\u8f03\u3057\u305f\u3044\u5546\u54c1\u3092\u4e0a\u304b\u3089\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\r\n            <\/div>\r\n          ) : (\r\n            <div\r\n              ref={scrollRef}\r\n              onMouseDown={handlePointerDown}\r\n              onMouseMove={handlePointerMove}\r\n              onMouseUp={endDrag}\r\n              onMouseLeave={endDrag}\r\n              className=\"spec-table-wrap\"\r\n            >\r\n              <table\r\n                className=\"spec-table\"\r\n                style={{ \"--spec-table-total-width\": `${tableTotalWidth}px` }}\r\n              >\r\n                <colgroup>\r\n                  <col style={{ width: labelColWidth }} \/>\r\n                  <col style={{ width: subLabelColWidth }} \/>\r\n                  {sortedDevices.map((device) => (\r\n                    <col key={device.id} style={{ width: deviceColWidth }} \/>\r\n                  ))}\r\n                <\/colgroup>\r\n                <thead>\r\n                  <tr>\r\n                    <th colSpan={2} className=\"spec-table-corner\"><\/th>\r\n                    {sortedDevices.map((device) => (\r\n                      <th key={device.id} className=\"spec-table-head-cell\">\r\n                        <div className=\"spec-table-head-inner\">\r\n                          <Thumb device={device} size={64} \/>\r\n                          <div className=\"spec-table-head-text\">\r\n                            <span className=\"spec-table-device-name\">\r\n                              {device.name}\r\n                            <\/span>\r\n                            {device.url && (\r\n                              <a\r\n                                href={device.url}\r\n                                target=\"_blank\"\r\n                                rel=\"noopener noreferrer\"\r\n                                className=\"spec-table-product-link\"\r\n                              >\r\n                                \u5546\u54c1\u30da\u30fc\u30b8\r\n                              <\/a>\r\n                            )}\r\n                            <button\r\n                              onClick={() => toggleDevice(device.id)}\r\n                              className=\"spec-table-remove-btn\"\r\n                            >\r\n                              <XIcon size={10} \/> \u524a\u9664\r\n                            <\/button>\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/th>\r\n                    ))}\r\n                  <\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                  {SPEC_ROWS.map((row, i) => {\r\n                    const rowClass = SPEC_ROW_VISUAL_INDEX[i] % 2 === 1 ? \"spec-row-odd\" : \"spec-row-even\";\r\n\r\n                    \/\/ \u300c\u52b9\u679c\u300d\u30bb\u30af\u30b7\u30e7\u30f3\uff1a\u6d17\u6d44\u529b\u301c\u6e29\u307e\u308a\u306e6\u9805\u76ee\u3092\u307e\u3068\u3081\u3066\u63cf\u753b\u3002\r\n                    \/\/ \u5148\u982d\u884c\u3060\u3051\u300c\u52b9\u679c\u300d\u306e\u7e26\u898b\u51fa\u3057\uff08rowSpan\uff09\u3092\u51fa\u3059\u3002\r\n                    if (row.type === \"stars\") {\r\n                      const effectRowClass = row.effectLast\r\n                        ? \"spec-row-effect spec-row-effect-last\"\r\n                        : \"spec-row-effect\";\r\n                      return (\r\n                        <tr key={row.key}>\r\n                          {row.effectFirst && (\r\n                            <th\r\n                              rowSpan={6}\r\n                              className=\"spec-effect-heading\"\r\n                            >\r\n                              <span>\u52b9<\/span>\r\n                              <span>\u679c<\/span>\r\n                            <\/th>\r\n                          )}\r\n                          <th\r\n                            className={`spec-effect-sublabel ${effectRowClass}`}\r\n                            style={{ left: labelColWidth }}\r\n                          >\r\n                            <div className=\"spec-effect-sublabel-inner\">\r\n                              <span>{row.label}<\/span>\r\n                              {row.sortable && (\r\n                                <span className=\"spec-sort-icons\">\r\n                                  {row.sortable.map((option) => (\r\n                                    <button\r\n                                      key={option.id}\r\n                                      type=\"button\"\r\n                                      title={option.title}\r\n                                      aria-label={option.title}\r\n                                      onClick={() => handleSort(row.key, option.id)}\r\n                                      className={`spec-sort-icon-btn ${\r\n                                        sortField === row.key && sortOptionId === option.id\r\n                                          ? \"is-active\"\r\n                                          : \"\"\r\n                                      }`}\r\n                                    >\r\n                                      <SortIcon dir={option.icon} size={8} \/>\r\n                                    <\/button>\r\n                                  ))}\r\n                                <\/span>\r\n                              )}\r\n                            <\/div>\r\n                          <\/th>\r\n                          {sortedDevices.map((device) => (\r\n                            <td key={device.id} className={`spec-table-cell ${effectRowClass}`}>\r\n                              <StarRating value={device.specs[row.key]} \/>\r\n                            <\/td>\r\n                          ))}\r\n                        <\/tr>\r\n                      );\r\n                    }\r\n\r\n                    return (\r\n                      <tr key={row.key}>\r\n                        <th colSpan={2} className={`spec-row-label ${rowClass}`}>\r\n                          <div>{row.label}<\/div>\r\n                          {row.note && <div className=\"spec-row-note\">{row.note}<\/div>}\r\n                          {row.sortable && (\r\n                            <div className=\"spec-sort-buttons\">\r\n                              {row.sortable.map((option) => (\r\n                                <button\r\n                                  key={option.id}\r\n                                  type=\"button\"\r\n                                  onClick={() => handleSort(row.key, option.id)}\r\n                                  className={`spec-sort-btn ${\r\n                                    sortField === row.key && sortOptionId === option.id\r\n                                      ? \"is-active\"\r\n                                      : \"\"\r\n                                  }`}\r\n                                >\r\n                                  <SortIcon dir={option.icon || \"desc\"} \/>\r\n                                  <span className=\"spec-sort-btn-full\">{option.label}<\/span>\r\n                                  <span className=\"spec-sort-btn-short\">\r\n                                    {option.shortLabel || option.label}\r\n                                  <\/span>\r\n                                <\/button>\r\n                              ))}\r\n                            <\/div>\r\n                          )}\r\n                        <\/th>\r\n                        {sortedDevices.map((device) => (\r\n                          <td key={device.id} className={`spec-table-cell ${rowClass}`}>\r\n                            {row.type === \"tags\" ? (\r\n                              <FeatureTagList tags={device.specs[row.key]} \/>\r\n                            ) : row.type === \"slider\" ? (\r\n                              <WaterModeSlider modes={device.specs[row.key]} \/>\r\n                            ) : row.type === \"status\" ? (\r\n                              <StatusValue value={device.specs[row.key]} \/>\r\n                            ) : row.type === \"percentList\" ? (\r\n                              <PercentList items={device.specs[row.key]} \/>\r\n                            ) : row.type === \"price\" ? (\r\n                              <PriceValue value={device.specs[row.key]} \/>\r\n                            ) : row.type === \"number\" ? (\r\n                              device.specs[row.key] ? (\r\n                                <NumberEmphasis text={device.specs[row.key]} variant=\"plain\" \/>\r\n                              ) : (\r\n                                \"\u30fc\"\r\n                              )\r\n                            ) : (\r\n                              device.specs[row.key] ?? \"\u30fc\"\r\n                            )}\r\n                          <\/td>\r\n                        ))}\r\n                      <\/tr>\r\n                    );\r\n                  })}\r\n                <\/tbody>\r\n              <\/table>\r\n            <\/div>\r\n          )}\r\n        <\/section>\r\n      <\/div>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nfunction mountApp() {\r\n  const container = document.getElementById(\"mirable-spec-app-root\");\r\n  if (!container) {\r\n    console.error(\r\n      \"[\u30df\u30e9\u30d6\u30eb\u6bd4\u8f03\u8868] \u30de\u30a6\u30f3\u30c8\u5148\u306e\u8981\u7d20 #mirable-spec-app-root \u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002\" +\r\n      \"HTML\u304c\u305d\u306e\u307e\u307e\u633f\u5165\u3055\u308c\u3066\u3044\u308b\u304b\u3001\u30da\u30fc\u30b8\u306e\u30bd\u30fc\u30b9\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\"\r\n    );\r\n    return;\r\n  }\r\n  const root = ReactDOM.createRoot(container);\r\n  root.render(<SpecComparison \/>);\r\n}\r\n\r\nif (document.readyState === \"loading\") {\r\n  document.addEventListener(\"DOMContentLoaded\", mountApp);\r\n} else {\r\n  mountApp();\r\n}\r\n})();\r\n<\/script><style>#mirable-spec-widget{--spec-table-height:800px;}@media (max-width:640px){#mirable-spec-widget{--spec-table-height:600px;}}<\/style><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"\u8aad\u307f\u8fbc\u307f\u4e2d\u2026","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-noside.php","meta":{"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"categories":[],"tags":[],"class_list":["post-3562","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/milky-selections.com\/mirable\/item_hikaku\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"ja_JP\" \/>\n\t\t<meta property=\"og:site_name\" content=\"\u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u30df\u30e9\u30d6\u30eb\u306e\u8ca9\u58f2\u30b5\u30a4\u30c8\u3067\u3059\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\u5546\u54c1\u5225\u6bd4\u8f03\u8868 - \u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 - \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01\" \/>\n\t\t<meta property=\"og:description\" content=\"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/milky-selections.com\/mirable\/item_hikaku\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2024-05-21T08:41:23+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-07-20T23:45:27+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"\u5546\u54c1\u5225\u6bd4\u8f03\u8868 - \u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 - \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01\" \/>\n\t\t<meta name=\"twitter:description\" content=\"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/item_hikaku#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable#listItem\",\"position\":1,\"name\":\"\\u30db\\u30fc\\u30e0\",\"item\":\"https:\\\/\\\/milky-selections.com\\\/mirable\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/item_hikaku#listItem\",\"name\":\"\\u5546\\u54c1\\u5225\\u6bd4\\u8f03\\u8868\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/item_hikaku#listItem\",\"position\":2,\"name\":\"\\u5546\\u54c1\\u5225\\u6bd4\\u8f03\\u8868\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable#listItem\",\"name\":\"\\u30db\\u30fc\\u30e0\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/#organization\",\"name\":\"wordpress\",\"description\":\"\\u30b7\\u30e3\\u30ef\\u30fc\\u30d8\\u30c3\\u30c9\\u30df\\u30e9\\u30d6\\u30eb\\u306e\\u8ca9\\u58f2\\u30b5\\u30a4\\u30c8\\u3067\\u3059\",\"url\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/item_hikaku#webpage\",\"url\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/item_hikaku\",\"name\":\"\\u5546\\u54c1\\u5225\\u6bd4\\u8f03\\u8868 - \\u30df\\u30e9\\u30d6\\u30eb\\u6b63\\u898f\\u901a\\u8ca9\\u30b5\\u30a4\\u30c8 - \\u3042\\u306a\\u305f\\u306e\\u30df\\u30e9\\u30d6\\u30eb\\u9078\\u3073\\u3092\\u30b5\\u30dd\\u30fc\\u30c8 - \\u30df\\u30e9\\u30d6\\u30eb\\u723d\\u30fb\\u6f64\\u30fb\\u8276\\u30fbzero\\u306e\\u6bd4\\u8f03\\uff01\",\"description\":\"\\u4e16\\u4ee3\\u5225\\u30df\\u30e9\\u30d6\\u30eb\\uff08\\u723d\\u30fb\\u6f64\\u30fb\\u8276\\u30fbzero\\uff094\\u5546\\u54c1\\u6bd4\\u8f03\\u3002\\u30a6\\u30eb\\u30c8\\u30e9\\u30d5\\u30a1\\u30a4\\u30f3\\u30d0\\u30d6\\u30eb\\u3092\\u542b\\u3080\\u6c34\\u6d41\\u3068\\u72ec\\u81ea\\u306e\\u30c8\\u30eb\\u30cd\\u30fc\\u30c9\\u30df\\u30b9\\u30c8\\u65b9\\u5f0f\\u3067\\u3084\\u3055\\u3057\\u304f\\u6c5a\\u308c\\u3092\\u6d17\\u3044\\u6d41\\u3057\\u3001\\u3046\\u308b\\u304a\\u3044\\u3092\\u808c\\u306b\\u5c4a\\u3051\\u3066\\u304f\\u308c\\u307e\\u3059\\u3002\\u723d\\uff08\\u3055\\u3089\\uff09\\u306f\\u6d17\\u6d44\\u7bc4\\u56f2\\u3001\\u6f64\\uff08\\u3046\\u308b\\uff09\\u306f\\u3046\\u308b\\u304a\\u3044\\u3001\\u8276\\uff08\\u3064\\u3084\\uff09\\u306f\\u3042\\u305f\\u305f\\u307e\\u308a\\u3001zero\\uff08\\u30bc\\u30ed\\uff09\\u306f\\u6d17\\u6d44\\u529b\\u3068\\u7279\\u5fb4\\u304c\\u3042\\u308a\\u3001\\u5e74\\u9f62\\u3084\\u808c\\u306b\\u5408\\u308f\\u305b\\u305f\\u30b7\\u30e3\\u30ef\\u30fc\\u30d8\\u30c3\\u30c9\\u3092\\u9078\\u3079\\u307e\\u3059\\u3002\",\"inLanguage\":\"ja\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/item_hikaku#breadcrumblist\"},\"datePublished\":\"2024-05-21T17:41:23+09:00\",\"dateModified\":\"2026-07-21T08:45:27+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/#website\",\"url\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/\",\"name\":\"\\u30df\\u30e9\\u30d6\\u30eb\\u6b63\\u898f\\u901a\\u8ca9\\u30b5\\u30a4\\u30c8\",\"description\":\"\\u30b7\\u30e3\\u30ef\\u30fc\\u30d8\\u30c3\\u30c9\\u30df\\u30e9\\u30d6\\u30eb\\u306e\\u8ca9\\u58f2\\u30b5\\u30a4\\u30c8\\u3067\\u3059\",\"inLanguage\":\"ja\",\"publisher\":{\"@id\":\"https:\\\/\\\/milky-selections.com\\\/mirable\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868 - \u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 - \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01","description":"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002","canonical_url":"https:\/\/milky-selections.com\/mirable\/item_hikaku","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/milky-selections.com\/mirable\/item_hikaku#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/milky-selections.com\/mirable#listItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/milky-selections.com\/mirable","nextItem":{"@type":"ListItem","@id":"https:\/\/milky-selections.com\/mirable\/item_hikaku#listItem","name":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868"}},{"@type":"ListItem","@id":"https:\/\/milky-selections.com\/mirable\/item_hikaku#listItem","position":2,"name":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868","previousItem":{"@type":"ListItem","@id":"https:\/\/milky-selections.com\/mirable#listItem","name":"\u30db\u30fc\u30e0"}}]},{"@type":"Organization","@id":"https:\/\/milky-selections.com\/mirable\/#organization","name":"wordpress","description":"\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u30df\u30e9\u30d6\u30eb\u306e\u8ca9\u58f2\u30b5\u30a4\u30c8\u3067\u3059","url":"https:\/\/milky-selections.com\/mirable\/"},{"@type":"WebPage","@id":"https:\/\/milky-selections.com\/mirable\/item_hikaku#webpage","url":"https:\/\/milky-selections.com\/mirable\/item_hikaku","name":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868 - \u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 - \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01","description":"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002","inLanguage":"ja","isPartOf":{"@id":"https:\/\/milky-selections.com\/mirable\/#website"},"breadcrumb":{"@id":"https:\/\/milky-selections.com\/mirable\/item_hikaku#breadcrumblist"},"datePublished":"2024-05-21T17:41:23+09:00","dateModified":"2026-07-21T08:45:27+09:00"},{"@type":"WebSite","@id":"https:\/\/milky-selections.com\/mirable\/#website","url":"https:\/\/milky-selections.com\/mirable\/","name":"\u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8","description":"\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u30df\u30e9\u30d6\u30eb\u306e\u8ca9\u58f2\u30b5\u30a4\u30c8\u3067\u3059","inLanguage":"ja","publisher":{"@id":"https:\/\/milky-selections.com\/mirable\/#organization"}}]},"og:locale":"ja_JP","og:site_name":"\u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u30df\u30e9\u30d6\u30eb\u306e\u8ca9\u58f2\u30b5\u30a4\u30c8\u3067\u3059","og:type":"article","og:title":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868 - \u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 - \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01","og:description":"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002","og:url":"https:\/\/milky-selections.com\/mirable\/item_hikaku","article:published_time":"2024-05-21T08:41:23+00:00","article:modified_time":"2026-07-20T23:45:27+00:00","twitter:card":"summary_large_image","twitter:title":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868 - \u30df\u30e9\u30d6\u30eb\u6b63\u898f\u901a\u8ca9\u30b5\u30a4\u30c8 - \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 - \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01","twitter:description":"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002"},"aioseo_meta_data":{"post_id":"3562","title":"#post_title #separator_sa #site_title #separator_sa \u3042\u306a\u305f\u306e\u30df\u30e9\u30d6\u30eb\u9078\u3073\u3092\u30b5\u30dd\u30fc\u30c8 #separator_sa \u30df\u30e9\u30d6\u30eb\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\u306e\u6bd4\u8f03\uff01","description":"\u4e16\u4ee3\u5225\u30df\u30e9\u30d6\u30eb\uff08\u723d\u30fb\u6f64\u30fb\u8276\u30fbzero\uff094\u5546\u54c1\u6bd4\u8f03\u3002\u30a6\u30eb\u30c8\u30e9\u30d5\u30a1\u30a4\u30f3\u30d0\u30d6\u30eb\u3092\u542b\u3080\u6c34\u6d41\u3068\u72ec\u81ea\u306e\u30c8\u30eb\u30cd\u30fc\u30c9\u30df\u30b9\u30c8\u65b9\u5f0f\u3067\u3084\u3055\u3057\u304f\u6c5a\u308c\u3092\u6d17\u3044\u6d41\u3057\u3001\u3046\u308b\u304a\u3044\u3092\u808c\u306b\u5c4a\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u723d\uff08\u3055\u3089\uff09\u306f\u6d17\u6d44\u7bc4\u56f2\u3001\u6f64\uff08\u3046\u308b\uff09\u306f\u3046\u308b\u304a\u3044\u3001\u8276\uff08\u3064\u3084\uff09\u306f\u3042\u305f\u305f\u307e\u308a\u3001zero\uff08\u30bc\u30ed\uff09\u306f\u6d17\u6d44\u529b\u3068\u7279\u5fb4\u304c\u3042\u308a\u3001\u5e74\u9f62\u3084\u808c\u306b\u5408\u308f\u305b\u305f\u30b7\u30e3\u30ef\u30fc\u30d8\u30c3\u30c9\u3092\u9078\u3079\u307e\u3059\u3002","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"},\"blockGraphs\":[]}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2024-05-21 01:11:47","updated":"2026-07-21 00:15:12","primary_term":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":{"id":"#aioseo-web-page-6a45ba515d1eb","slug":"web-page","graphName":"WebPage","label":"Web \u30da\u30fc\u30b8","properties":{"type":"WebPage","name":"","description":""}}},"graphName":"WebPage","isEnabled":true},"graphs":[]},"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/milky-selections.com\/mirable\" title=\"\u30db\u30fc\u30e0\">\u30db\u30fc\u30e0<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t\u5546\u54c1\u5225\u6bd4\u8f03\u8868\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"\u30db\u30fc\u30e0","link":"https:\/\/milky-selections.com\/mirable"},{"label":"\u5546\u54c1\u5225\u6bd4\u8f03\u8868","link":"https:\/\/milky-selections.com\/mirable\/item_hikaku"}],"_links":{"self":[{"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/pages\/3562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/comments?post=3562"}],"version-history":[{"count":177,"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/pages\/3562\/revisions"}],"predecessor-version":[{"id":3575,"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/pages\/3562\/revisions\/3575"}],"wp:attachment":[{"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/media?parent=3562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/categories?post=3562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/milky-selections.com\/mirable\/wp-json\/wp\/v2\/tags?post=3562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}