{"product_id":"150p-fantsuku05","title":"【ポイント交換限定】【150P】ポイントで投票！第5回ファンと創る「アクリルスタンド」投票券　10票用","description":"\u003c!-- 追加キャラクター投票 キャラクター検索｜ファンと創るアクリルスタンド --\u003e\n\u003cstyle\u003e\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900\u0026display=swap');\n\n:root{\n  --bg:#f7f6f4;\n  --surface:#ffffff;\n  --red:#f03030;\n  --red-deep:#d61f1f;\n  --gold:#f5a623;\n  --text:#2a2a2a;\n  --muted:#8a8a8a;\n  --line:#e7e5e1;\n  --ok:#2fae66;\n}\n\n.wrap{\n  width:100% !important;\n  max-width:640px !important;\n  margin:0 auto !important;\n  padding:44px 20px 80px !important;\n  color:var(--text);\n  font-family:'Noto Sans JP', sans-serif;\n  box-sizing:border-box !important;\n  overflow:hidden;\n  -webkit-text-size-adjust:100%;\n  text-size-adjust:100%;\n}\n\n.wrap *{\n  box-sizing:border-box !important;\n  white-space:normal !important;\n  overflow-wrap:break-word !important;\n  word-break:break-word !important;\n}\n\n.wrap img{\n  max-width:100%;\n}\n\n.search-bar button,\n.rate-card .rate-current{\n  white-space:nowrap !important;\n}\n\n@media screen and (max-width:480px){\n  .wrap{\n    width:100% !important;\n    max-width:100% !important;\n    padding:32px 16px 64px !important;\n    margin:0 auto !important;\n  }\n}\n\n.lede{\n  text-align:center;\n  margin-bottom:28px;\n}\n\n.lede h1{\n  font-size:22px;\n  font-weight:800;\n  margin:0 0 8px;\n  letter-spacing:.02em;\n  border-bottom:3px solid var(--red);\n  display:inline-block;\n  padding-bottom:6px;\n  white-space:nowrap !important;\n  word-break:keep-all !important;\n  overflow-wrap:normal !important;\n}\n\n.lede p{\n  color:var(--muted);\n  font-size:13px;\n  margin:14px 0 0;\n  line-height:1.7;\n}\n\n.lede .about-link{\n  margin-top:10px;\n}\n\n.lede .about-link a{\n  color:var(--muted);\n  font-weight:500;\n  font-size:12px;\n  text-decoration:underline;\n  text-underline-offset:2px;\n}\n\n.lede .about-link a:hover{\n  color:var(--red-deep);\n}\n\n.campaign-box{\n  width:100%;\n  background:var(--surface);\n  border:1px solid var(--line);\n  border-left:4px solid var(--red);\n  border-radius:10px;\n  padding:18px 20px;\n  margin-bottom:28px;\n}\n\n.campaign-box .campaign-title{\n  font-weight:700;\n  font-size:15px;\n  color:var(--red-deep);\n  margin:0 0 10px;\n}\n\n.campaign-box p{\n  font-size:13px;\n  color:var(--text);\n  line-height:1.8;\n  margin:0 0 8px;\n}\n\n.campaign-box p:last-child{\n  margin-bottom:0;\n}\n\n.campaign-link{\n  display:block;\n  width:100%;\n  text-align:center;\n  margin-top:16px;\n  font-size:13px;\n  font-weight:700;\n  color:#fff;\n  text-decoration:none !important;\n  background:var(--red);\n  border-radius:999px;\n  padding:12px 20px;\n}\n\n.campaign-link:hover{\n  background:var(--red-deep);\n}\n\n.rate-table{\n  display:flex !important;\n  width:100%;\n  gap:8px;\n  margin-bottom:28px;\n}\n\n.rate-card{\n  flex:1 1 0;\n  min-width:0;\n  text-align:center;\n  background:var(--surface);\n  border:1.5px solid var(--line);\n  border-radius:12px;\n  padding:14px 2px;\n  text-decoration:none !important;\n  display:block;\n  overflow:hidden;\n}\n\n.rate-card:hover{\n  border-color:var(--red);\n}\n\n.rate-card.active{\n  border-color:var(--red);\n  box-shadow:0 4px 12px -4px rgba(240,48,48,.4);\n}\n\n.rate-card .rate-name{\n  font-size:12.5px;\n  font-weight:700;\n  color:var(--text);\n  margin-bottom:6px;\n}\n\n.rate-card .rate-pt{\n  font-size:18px;\n  font-weight:900;\n  color:var(--red-deep);\n}\n\n.rate-card .rate-note{\n  font-size:10.5px;\n  color:var(--gold);\n  font-weight:700;\n  margin-top:4px;\n}\n\n.rate-card .rate-current{\n  display:inline-block;\n  font-size:9.5px;\n  font-weight:700;\n  color:#fff;\n  background:var(--red);\n  border-radius:999px;\n  padding:2px 8px;\n  margin-top:6px;\n}\n\n.character-search-box{\n  width:100%;\n  background:#f8f8f8;\n  border:1px solid var(--line);\n  border-radius:16px;\n  padding:20px 16px 18px;\n  margin-top:4px;\n}\n\n.character-search-title{\n  text-align:center;\n  font-size:16px;\n  font-weight:800;\n  color:var(--text);\n  margin:0 0 5px;\n}\n\n.character-search-description{\n  text-align:center;\n  font-size:12px;\n  line-height:1.7;\n  color:var(--muted);\n  margin:0 0 18px;\n}\n\n.element-label{\n  text-align:center;\n  font-size:12px;\n  font-weight:700;\n  color:#555;\n  margin:0 0 10px;\n}\n\n.element-tabs{\n  display:flex;\n  width:100%;\n  gap:10px;\n  justify-content:center;\n  align-items:flex-start;\n  margin-bottom:18px;\n  flex-wrap:wrap !important;\n}\n\n.element-tabs button{\n  width:56px;\n  min-height:76px;\n  flex:0 0 56px !important;\n  font-family:inherit;\n  font-size:11px;\n  font-weight:700;\n  color:var(--muted);\n  background:var(--surface);\n  border:1px solid var(--line);\n  border-radius:12px;\n  padding:8px 4px 7px;\n  cursor:pointer;\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n  gap:4px;\n}\n\n.element-tabs button img{\n  width:28px;\n  height:28px;\n  opacity:.55;\n}\n\n.element-tabs button span{\n  white-space:nowrap !important;\n}\n\n.element-tabs button.active{\n  border-color:var(--red);\n  color:var(--red-deep);\n  box-shadow:0 4px 10px -4px rgba(240,48,48,.35);\n}\n\n.element-tabs button.active img{\n  opacity:1;\n}\n\n@media screen and (max-width:480px){\n  .character-search-box{\n    padding:18px 12px 16px;\n  }\n\n  .element-tabs{\n    flex-wrap:nowrap !important;\n    gap:6px !important;\n    justify-content:space-between;\n  }\n\n  .element-tabs button{\n    width:auto !important;\n    flex:1 1 0 !important;\n    min-width:0 !important;\n    min-height:70px;\n    padding:7px 2px 6px;\n    border-radius:10px;\n  }\n\n  .element-tabs button img{\n    width:26px;\n    height:26px;\n  }\n\n  .element-tabs button span{\n    font-size:10px;\n    white-space:nowrap !important;\n  }\n}\n\n.search-bar{\n  display:flex;\n  width:100%;\n  max-width:100%;\n  gap:8px;\n  background:var(--surface);\n  border:2px solid var(--line);\n  border-radius:999px;\n  padding:5px 5px 5px 18px;\n  align-items:center;\n  overflow:hidden;\n}\n\n.search-bar:focus-within{\n  border-color:var(--red);\n}\n\n.search-bar input{\n  flex:1 1 0 !important;\n  width:0;\n  min-width:0 !important;\n  max-width:none !important;\n  background:transparent;\n  border:none;\n  outline:none;\n  color:var(--text);\n  font-family:inherit;\n  font-size:15px;\n  padding:12px 0;\n}\n\n.search-bar input::placeholder{\n  color:var(--muted);\n}\n\n.search-bar button{\n  font-family:inherit;\n  font-weight:700;\n  font-size:14px;\n  border:none;\n  cursor:pointer;\n  border-radius:999px;\n  padding:12px 18px;\n  background:var(--red);\n  color:#fff;\n  flex:0 0 auto !important;\n  white-space:nowrap !important;\n}\n\n.search-bar button:hover{\n  background:var(--red-deep);\n}\n\n.hint{\n  text-align:center;\n  color:var(--muted);\n  font-size:12px;\n  margin-top:10px;\n}\n\n.hint button{\n  background:none;\n  border:none;\n  color:var(--muted);\n  font-family:inherit;\n  font-size:12px;\n  cursor:pointer;\n  padding:0;\n}\n\n@media screen and (max-width:380px){\n  .search-bar{\n    padding-left:14px;\n  }\n\n  .search-bar input{\n    font-size:14px;\n  }\n\n  .search-bar button{\n    font-size:13px;\n    padding:11px 13px;\n  }\n}\n\n#result-area{\n  width:100%;\n  margin-top:20px;\n  display:flex;\n  flex-direction:column;\n  gap:12px;\n}\n\n#result-area:empty{\n  display:none;\n}\n\n.error-box{\n  width:100%;\n  text-align:center;\n  padding:28px 20px;\n  border:1px solid var(--line);\n  border-radius:14px;\n  color:var(--muted);\n  font-size:13.5px;\n  line-height:1.8;\n  background:var(--surface);\n}\n\n.error-box strong{\n  display:block;\n  color:var(--red);\n  font-size:16px;\n  margin-bottom:6px;\n}\n\n.plate{\n  display:flex;\n  width:100%;\n  min-width:0;\n  gap:16px;\n  align-items:center;\n  background:var(--surface);\n  border:1px solid var(--line);\n  border-radius:16px;\n  padding:18px 20px;\n  box-shadow:0 6px 18px -10px rgba(0,0,0,.12);\n}\n\n.plate .portrait{\n  width:72px;\n  height:72px;\n  min-width:72px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n}\n\n.plate .portrait img{\n  width:48px;\n  height:48px;\n}\n\n.plate .info{\n  flex:1 1 0;\n  min-width:0;\n}\n\n.plate .id-row{\n  font-size:12px;\n  color:var(--muted);\n  margin-bottom:3px;\n}\n\n.plate h2{\n  font-size:18px;\n  margin:0 0 10px;\n  font-weight:800;\n}\n\n.badge{\n  display:inline-block;\n  font-size:12px;\n  font-weight:700;\n  padding:5px 14px;\n  border-radius:999px;\n}\n\n.badge.released{\n  background:rgba(47,174,102,.12);\n  color:var(--ok);\n  border:1px solid rgba(47,174,102,.35);\n}\n\n.badge.voting{\n  background:rgba(245,166,35,.12);\n  color:var(--gold);\n  border:1px solid rgba(245,166,35,.35);\n}\n\n.result-count{\n  font-size:12px;\n  color:var(--muted);\n  text-align:right;\n}\n\n.howto-section{\n  width:100%;\n  margin-top:44px;\n}\n\n.howto-section h2{\n  font-size:17px;\n  font-weight:700;\n  margin:0 0 16px;\n  text-align:center;\n}\n\n.howto-step{\n  display:flex;\n  gap:16px;\n  align-items:flex-start;\n  background:var(--surface);\n  border:1px solid var(--line);\n  border-radius:14px;\n  padding:16px 18px;\n  margin-bottom:10px;\n}\n\n.howto-step .step-num{\n  flex:none;\n  width:56px;\n  text-align:center;\n  font-size:11px;\n  font-weight:700;\n  color:#fff;\n  background:var(--red);\n  border-radius:999px;\n  padding:4px 0;\n  white-space:nowrap !important;\n}\n\n.howto-step p{\n  flex:1;\n  min-width:0;\n  font-size:13px;\n  line-height:1.7;\n  margin:0;\n}\n\n.howto-note{\n  margin-top:14px;\n  padding:14px 16px;\n  background:var(--surface);\n  border:1px solid var(--line);\n  border-radius:10px;\n}\n\n.howto-note p{\n  font-size:12px;\n  color:var(--muted);\n  line-height:1.8;\n  margin:0 0 6px;\n}\n\n@media screen and (max-width:480px){\n  .lede h1{font-size:16px;}\n  .campaign-box{padding:16px;}\n\n  .plate{\n    padding:16px;\n    gap:10px;\n  }\n\n  .plate .portrait{\n    width:54px;\n    height:54px;\n    min-width:54px;\n  }\n\n  .plate .portrait img{\n    width:42px;\n    height:42px;\n  }\n\n  .plate h2{font-size:16px;}\n\n  .howto-step{\n    gap:12px;\n    padding:14px;\n  }\n}\n\u003c\/style\u003e\n\n\u003cdiv class=\"wrap\"\u003e\n\n  \u003cdiv class=\"lede\"\u003e\n    \u003ch1\u003e追加して欲しいキャラクターを探そう\u003c\/h1\u003e\n    \u003cp\u003e\n      ファンと創るアクリルスタンド　追加キャラクター投票\u003cbr\u003e\n      属性で絞り込み、またはキャラクター名・読み仮名・図鑑番号で検索できます\n    \u003c\/p\u003e\n\n    \u003cp class=\"about-link\"\u003e\n      \u003ca href=\"https:\/\/monstore.monster-strike.com\/pages\/about-fan-kyoso-goods\"\u003e\n        「ファンと創る」企画について詳しくはこちら＞\n      \u003c\/a\u003e\n    \u003c\/p\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"campaign-box\"\u003e\n    \u003cp class=\"campaign-title\"\u003e【1票であなたの推しキャラがグッズ化確定】\u003c\/p\u003e\n    \u003cp\u003e投票期間：9\/10(木) 12:00 〜 9\/24(木) 10:59\u003c\/p\u003e\n    \u003cp\u003eキャラクターに1票でも投票が入れば、必ずラインナップの対象になります。（※コラボや強化素材を含む一部のキャラクターは制作都合上対象外となります）\u003c\/p\u003e\n    \u003cp\u003e検索に出てこないキャラクターは商品化対象外キャラクターです。\u003c\/p\u003e\n    \u003cp\u003eすでに商品化済みのキャラクター（2,270体）は投票対象外です。検索結果に「商品化済み」と表示されるキャラクターへの投票は無効票となりますのでご注意ください。\u003c\/p\u003e\n\n    \u003ca class=\"campaign-link\" href=\"https:\/\/monstore.monster-strike.com\/blogs\/column\/260910\"\u003e\n      第5回ファンと創る「アクリルスタンド」\u003cbr\u003eの企画詳細はこちら＞\n    \u003c\/a\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"rate-table\"\u003e\n\n    \u003ca class=\"rate-card\" href=\"https:\/\/monstore.monster-strike.com\/products\/20p-fantsuku05\"\u003e\n      \u003cdiv class=\"rate-name\"\u003e1票券\u003c\/div\u003e\n      \u003cdiv class=\"rate-pt\"\u003e20pt\u003c\/div\u003e\n    \u003c\/a\u003e\n\n    \u003ca class=\"rate-card\" href=\"https:\/\/monstore.monster-strike.com\/products\/80p-fantsuku05\"\u003e\n      \u003cdiv class=\"rate-name\"\u003e5票券\u003c\/div\u003e\n      \u003cdiv class=\"rate-pt\"\u003e80pt\u003c\/div\u003e\n      \u003cdiv class=\"rate-note\"\u003e20ptお得\u003c\/div\u003e\n    \u003c\/a\u003e\n\n    \u003ca class=\"rate-card active\" href=\"https:\/\/monstore.monster-strike.com\/products\/150p-fantsuku05\"\u003e\n      \u003cdiv class=\"rate-name\"\u003e10票券\u003c\/div\u003e\n      \u003cdiv class=\"rate-pt\"\u003e150pt\u003c\/div\u003e\n      \u003cdiv class=\"rate-note\"\u003e50ptお得\u003c\/div\u003e\n      \u003cdiv class=\"rate-current\"\u003eこのページ\u003c\/div\u003e\n    \u003c\/a\u003e\n\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"character-search-box\"\u003e\n\n    \u003ch2 class=\"character-search-title\"\u003e\n      投票したいキャラクターを探す\n    \u003c\/h2\u003e\n\n    \u003cp class=\"character-search-description\"\u003e\n      キャラクター名・読み仮名・図鑑番号で検索できます\n    \u003c\/p\u003e\n\n    \u003cp class=\"element-label\"\u003e\n      属性から絞り込む（任意）\n    \u003c\/p\u003e\n\n    \u003cdiv class=\"element-tabs\" id=\"elementTabs\"\u003e\n\n      \u003cbutton type=\"button\" data-el=\"all\"\u003e\n        \u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_all_50x.png\" alt=\"すべて\"\u003e\n        \u003cspan\u003eすべて\u003c\/span\u003e\n      \u003c\/button\u003e\n\n      \u003cbutton type=\"button\" data-el=\"fire\"\u003e\n        \u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_fire_50x.png\" alt=\"火\"\u003e\n        \u003cspan\u003e火\u003c\/span\u003e\n      \u003c\/button\u003e\n\n      \u003cbutton type=\"button\" data-el=\"water\"\u003e\n        \u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_water_50x.png\" alt=\"水\"\u003e\n        \u003cspan\u003e水\u003c\/span\u003e\n      \u003c\/button\u003e\n\n      \u003cbutton type=\"button\" data-el=\"wood\"\u003e\n        \u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_plant_50x.png\" alt=\"木\"\u003e\n        \u003cspan\u003e木\u003c\/span\u003e\n      \u003c\/button\u003e\n\n      \u003cbutton type=\"button\" data-el=\"light\"\u003e\n        \u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_light_50x.png\" alt=\"光\"\u003e\n        \u003cspan\u003e光\u003c\/span\u003e\n      \u003c\/button\u003e\n\n      \u003cbutton type=\"button\" data-el=\"dark\"\u003e\n        \u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_dark_50x.png\" alt=\"闇\"\u003e\n        \u003cspan\u003e闇\u003c\/span\u003e\n      \u003c\/button\u003e\n\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"search-bar\"\u003e\n      \u003cinput type=\"text\" id=\"searchInput\" placeholder=\"キャラクター名・読み仮名・図鑑番号\" autocomplete=\"off\"\u003e\n      \u003cbutton type=\"button\" id=\"searchBtn\"\u003e検索する\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"hint\"\u003e\n      \u003cbutton type=\"button\" id=\"clearBtn\"\u003eクリア\u003c\/button\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n  \u003cdiv id=\"result-area\"\u003e\u003c\/div\u003e\n\n  \u003cdiv class=\"howto-section\"\u003e\n\n    \u003ch2\u003eポイントで投票方法\u003c\/h2\u003e\n\n    \u003cdiv class=\"howto-step\"\u003e\n      \u003cdiv class=\"step-num\"\u003eSTEP 1\u003c\/div\u003e\n      \u003cp\u003eモンストアにログインし、投票券（1票券＝20pt、5票券＝80pt〈20ptお得〉、10票券＝150pt〈50ptお得〉）から選んでポイントで交換（「OK」をタップ）。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"howto-step\"\u003e\n      \u003cdiv class=\"step-num\"\u003eSTEP 2\u003c\/div\u003e\n      \u003cp\u003e「ポイントと交換しました。」の表示が出たら「閉じる」をタップ。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"howto-step\"\u003e\n      \u003cdiv class=\"step-num\"\u003eSTEP 3\u003c\/div\u003e\n      \u003cp\u003e件名[ポイントの交換手続きのご依頼]のメールが届くので、本文の「交換手続きをする」をタップ。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"howto-step\"\u003e\n      \u003cdiv class=\"step-num\"\u003eSTEP 4\u003c\/div\u003e\n      \u003cp\u003e注文内容（¥0）を確認し、「ご注文完了」をタップして注文を完了させる。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"howto-step\"\u003e\n      \u003cdiv class=\"step-num\"\u003eSTEP 5\u003c\/div\u003e\n      \u003cp\u003e注文番号が発行され、「ご注文が確認されました」という確認メールが届きます。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"howto-step\"\u003e\n      \u003cdiv class=\"step-num\"\u003eSTEP 6\u003c\/div\u003e\n      \u003cp\u003e件名[ご注文内容の確認 注文番号：#〇〇〇〇〇]のメールが届くので、本文の「投票フォームはこちら」から、このページで調べたキャラクターの図鑑番号・名前を入力して投票してください。注文番号は自動入力されるので編集しないでください。もし自動入力されていない場合は、メールに記載の番号を「#」を抜いて入力してください。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n    \u003cdiv class=\"howto-note\"\u003e\n      \u003cp\u003e※1回の投票につき、メールに記載の注文番号が必要です。\u003c\/p\u003e\n      \u003cp\u003e※「祝イノ常夜 黄泉」については過去に販売実績がございますが、あらためて現在のグッズ化基準に沿って確認を行った結果、今回はグッズ化ラインナップの対象外とさせていただくこととなりました。何卒ご理解いただけますと幸いです。\u003c\/p\u003e\n      \u003cp\u003e※1つの注文番号で投票できるキャラクター数は、購入した投票券の票数分です（1票券は1体、5票券は5体、10票券は10体まで、それぞれ異なるキャラクターに投票できます）。\u003c\/p\u003e\n      \u003cp\u003e※同じキャラクターに対して、1つの注文番号で重複して投票することはできません。\u003c\/p\u003e\n      \u003cp\u003e※複数回投票いただけますが、投票結果のランキング公開はありませんのでご了承ください。\u003c\/p\u003e\n      \u003cp\u003e※投票期間中、投票可能キャラクターは適宜追加予定です。\u003c\/p\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003cscript\u003e\nconst ICON = {\n  fire:\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_fire_50x.png\",\n  water:\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_water_50x.png\",\n  wood:\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_plant_50x.png\",\n  light:\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_light_50x.png\",\n  dark:\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_dark_50x.png\"\n};\n\nlet CHARACTERS = [];\n\nconst DATA_URL =\n  \"https:\/\/cdn.shopify.com\/s\/files\/1\/0561\/4121\/7975\/files\/characters20290904.json?v=1788851053\";\n\nconst ELEMENT_LABEL = {\n  fire:\"火\",\n  water:\"水\",\n  wood:\"木\",\n  light:\"光\",\n  dark:\"闇\"\n};\n\nconst searchBtn = document.getElementById('searchBtn');\nconst input = document.getElementById('searchInput');\nconst resultArea = document.getElementById('result-area');\nconst clearBtn = document.getElementById('clearBtn');\nconst tabButtons = document.querySelectorAll('#elementTabs button');\n\nlet activeTab = null;\nlet dataLoaded = false;\n\nconst LOADING_MSG = `\n  \u003cdiv class=\"error-box\"\u003e\n    データを読み込み中です…\n  \u003c\/div\u003e\n`;\n\nconst LOAD_ERROR_MSG = `\n  \u003cdiv class=\"error-box\"\u003e\n    \u003cstrong\u003eデータを読み込めませんでした\u003c\/strong\u003e\n    時間をおいて再度お試しください。\n  \u003c\/div\u003e\n`;\n\nresultArea.innerHTML = LOADING_MSG;\n\nfetch(DATA_URL)\n  .then(res =\u003e {\n    if (!res.ok) throw new Error('HTTP ' + res.status);\n    return res.json();\n  })\n  .then(data =\u003e {\n    CHARACTERS = data;\n    dataLoaded = true;\n    resultArea.innerHTML = '';\n  })\n  .catch(err =\u003e {\n    console.error('データ読み込みエラー:', err);\n    resultArea.innerHTML = LOAD_ERROR_MSG;\n  });\n\nfunction matchesElement(c) {\n  return (\n    activeTab === null ||\n    activeTab === 'all' ||\n    c.element === activeTab\n  );\n}\n\nfunction normalizeText(str) {\n  return String(str || '')\n    .normalize('NFKC')\n    .toLowerCase()\n    .replace(\/[\\u30a1-\\u30f6]\/g, function(match) {\n      return String.fromCharCode(match.charCodeAt(0) - 0x60);\n    })\n    .replace(\/\\s+\/g, '');\n}\n\nfunction search(query) {\n  const q = normalizeText(query);\n\n  const padded = \/^[0-9]+$\/.test(q)\n    ? String(parseInt(q, 10)).padStart(4, '0')\n    : null;\n\n  return CHARACTERS.filter(c =\u003e {\n    if (!matchesElement(c)) return false;\n    if (!q) return true;\n\n    const id = String(c.id || '');\n    const name = normalizeText(c.name);\n    const kana = normalizeText(c.kana);\n\n    return (\n      id === q ||\n      id === padded ||\n      name.includes(q) ||\n      kana.includes(q)\n    );\n  });\n}\n\nfunction plateHTML(c) {\n  const badgeClass =\n    c.status === 'released'\n      ? 'released'\n      : 'voting';\n\n  const badgeLabel =\n    c.status === 'released'\n      ? '商品化済み'\n      : '投票対象';\n\n  return `\n    \u003cdiv class=\"plate\"\u003e\n      \u003cdiv class=\"portrait\"\u003e\n        \u003cimg\n          src=\"${ICON[c.element]}\"\n          alt=\"${ELEMENT_LABEL[c.element]}\"\n        \u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"info\"\u003e\n        \u003cdiv class=\"id-row\"\u003e\n          No.${c.id}　属性：${ELEMENT_LABEL[c.element]}\n        \u003c\/div\u003e\n\n        \u003ch2\u003e${c.name}\u003c\/h2\u003e\n\n        \u003cspan class=\"badge ${badgeClass}\"\u003e\n          ${badgeLabel}\n        \u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  `;\n}\n\nfunction render() {\n  if (!dataLoaded) return;\n\n  const hasInput =\n    input.value.trim() !== '' ||\n    activeTab !== null;\n\n  if (!hasInput) {\n    resultArea.innerHTML = '';\n    return;\n  }\n\n  const results = search(input.value);\n\n  if (results.length === 0) {\n    resultArea.innerHTML = `\n      \u003cdiv class=\"error-box\"\u003e\n        \u003cstrong\u003e商品化対象外です\u003c\/strong\u003e\n        入力した名前・読み仮名・図鑑番号、\n        または選択中の属性に該当するキャラクターが見つかりませんでした。\n      \u003c\/div\u003e\n    `;\n    return;\n  }\n\n  const countLabel =\n    results.length \u003e 1\n      ? `\u003cdiv class=\"result-count\"\u003e${results.length}件見つかりました\u003c\/div\u003e`\n      : '';\n\n  resultArea.innerHTML =\n    countLabel +\n    results.map(plateHTML).join('');\n}\n\nsearchBtn.addEventListener('click', () =\u003e {\n  render();\n});\n\ninput.addEventListener('keydown', e =\u003e {\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    render();\n  }\n});\n\ntabButtons.forEach(btn =\u003e {\n  btn.addEventListener('click', () =\u003e {\n    const isAlreadyActive =\n      btn.classList.contains('active');\n\n    tabButtons.forEach(b =\u003e {\n      b.classList.remove('active');\n    });\n\n    if (isAlreadyActive) {\n      activeTab = null;\n    } else {\n      btn.classList.add('active');\n      activeTab = btn.dataset.el;\n    }\n\n    render();\n  });\n});\n\nclearBtn.addEventListener('click', () =\u003e {\n  input.value = '';\n\n  tabButtons.forEach(b =\u003e {\n    b.classList.remove('active');\n  });\n\n  activeTab = null;\n  resultArea.innerHTML = '';\n});\n\u003c\/script\u003e","brand":"モンスターストライク","offers":[{"title":"グッズ化投票券10票用","offer_id":50985194094835,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0561\/4121\/7975\/files\/fatuku05_150p.png?v=1788770463","url":"https:\/\/monstore.monster-strike.com\/products\/150p-fantsuku05","provider":"モンストア","version":"1.0","type":"link"}