{"title":"第5回 ファンと創る「アクリルスタンド」追加投票券","description":"\u003cbody\u003e\n\n\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003ctitle\u003e第5回 ファンと創る「アクリルスタンド」追加投票券\u003c\/title\u003e\n\u003clink rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\u003e\n\u003clink href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900\u0026amp;display=swap\" rel=\"stylesheet\"\u003e\n\u003cstyle\u003e\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  }\n  *{box-sizing:border-box;}\n  html,body{overflow-x:hidden;}\n  body{\n    font-family:'Noto Sans JP', sans-serif;\n  }\n  .wrap{\n    max-width:680px; margin:0 auto;\n    color:var(--text);\n    padding:36px 20px 40px;\n  }\n\n  h1{\n    font-size:20px; font-weight:900; line-height:1.5; text-align:center;\n    margin:0 0 8px;\n  }\n  .lede{\n    text-align:center; color:var(--muted); font-size:13px; line-height:1.8;\n    margin:0 0 24px;\n  }\n  .lede .about-link{\n    display:block; margin-top:8px;\n  }\n  .lede .about-link a{\n    color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:2px;\n  }\n  .lede .about-link a:hover{color:var(--red-deep);}\n\n  .campaign-box{\n    background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--red);\n    border-radius:10px; padding:18px 20px; margin-bottom:24px;\n  }\n  .campaign-box .campaign-title{\n    font-weight:700; font-size:15px; color:var(--red-deep); margin:0 0 10px;\n  }\n  .campaign-box p{font-size:13px; color:var(--text); line-height:1.8; margin:0 0 8px;}\n  .campaign-box p:last-child{margin-bottom:0;}\n  .campaign-link{\n    display:block; text-align:center; margin-top:16px; font-size:13px; font-weight:700;\n    color:#fff; text-decoration:none !important; background:var(--red);\n    border-radius:999px; padding:12px 20px; transition:background .15s ease;\n  }\n  .campaign-link:hover{background:var(--red-deep);}\n\n  .rate-table{\n    display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;\n  }\n  .rate-card{\n    flex:1 1 0 !important; flex-shrink:1 !important; min-width:0 !important; width:auto !important; text-align:center; background:var(--surface); border:1px solid var(--line);\n    border-radius:12px; padding:16px 4px;\n  }\n  .rate-card .rate-name{font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:6px;}\n  .rate-card .rate-pt{font-size:18px; font-weight:900; color:var(--red-deep);}\n  .rate-card .rate-note{font-size:10.5px; color:var(--gold); font-weight:700; margin-top:4px;}\n\n  .cta-box{text-align:center; margin-bottom:28px;}\n  .cta-box a{\n    display:inline-block; background:var(--red); color:#fff; text-decoration:none !important;\n    font-weight:700; font-size:14px; padding:14px 32px; border-radius:999px;\n  }\n  .cta-box a:hover{background:var(--red-deep);}\n  .cta-box p{font-size:12px; color:var(--muted); margin:10px 0 0;}\n\n  .search-heading{\n    font-size:15px; font-weight:700; text-align:center; margin:0 0 14px;\n  }\n\n  .element-tabs{\n    display:flex; gap:10px; justify-content:center; align-items:flex-start;\n    margin-bottom:20px; flex-wrap:wrap;\n  }\n  .element-tabs button{\n    width:56px; min-height:76px; flex:0 0 56px !important; box-sizing:border-box;\n    font-family:inherit; font-size:11px; font-weight:700; color:var(--muted);\n    background:var(--surface); border:1px solid var(--line); border-radius:12px;\n    padding:8px 4px 7px; cursor:pointer; display:flex; flex-direction:column;\n    align-items:center; justify-content:center; gap:4px;\n    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;\n  }\n  .element-tabs button img{width:28px; height:28px; opacity:.55; transition:opacity .15s ease;}\n  .element-tabs button:hover{transform:translateY(-2px);}\n  .element-tabs button.active{\n    border-color:var(--red); color:var(--red-deep);\n    box-shadow:0 4px 10px -4px rgba(240,48,48,.35);\n  }\n  .element-tabs button.active img{opacity:1;}\n\n  .search-bar{\n    display:flex; gap:10px; background:var(--surface); border:2px solid var(--line);\n    border-radius:999px; padding:5px 5px 5px 20px; align-items:center;\n    transition:border-color .15s ease;\n  }\n  .search-bar:focus-within{border-color:var(--red);}\n  .search-bar input{\n    flex:1 1 auto !important; flex-shrink:1 !important; min-width:0 !important; background:transparent; border:none; outline:none;\n    color:var(--text); font-family:inherit; font-size:15px; padding:12px 0;\n  }\n  .search-bar input::placeholder{color:var(--muted);}\n  .search-bar button{\n    font-family:inherit; font-weight:700; font-size:14px; border:none; cursor:pointer;\n    border-radius:999px; padding:12px 24px; background:var(--red); color:#fff;\n    transition:background .15s ease, transform .15s ease;\n  }\n  .search-bar button:hover{background:var(--red-deep);}\n  .search-bar button:active{transform:scale(.97);}\n\n  .hint{text-align:center; color:var(--muted); font-size:12px; margin-top:10px;}\n  .hint button{\n    background:none; border:none; color:var(--muted); font-family:inherit;\n    font-size:12px; cursor:pointer; text-decoration:none; padding:0;\n  }\n\n  #result-area{margin-top:24px; margin-bottom:28px; display:flex; flex-direction:column; gap:12px;}\n\n  .idle-box, .error-box{\n    text-align:center; padding:28px 20px; border:1px solid var(--line);\n    border-radius:14px; color:var(--muted); font-size:13.5px; line-height:1.8;\n    background:var(--surface);\n  }\n  .error-box strong{display:block; color:var(--red); font-size:16px; margin-bottom:6px;}\n\n  .plate{\n    position:relative; display:flex; gap:16px; align-items:center;\n    background:var(--surface); border:1px solid var(--line); border-radius:16px;\n    padding:18px 20px; box-shadow:0 6px 18px -10px rgba(0,0,0,.12);\n    animation:pop .25s ease;\n  }\n  @keyframes pop{\n    from{opacity:0; transform:translateY(6px);}\n    to{opacity:1; transform:translateY(0);}\n  }\n  .plate .portrait{\n    position:relative; width:72px; height:72px; min-width:72px;\n    display:flex; align-items:center; justify-content:center;\n  }\n  .plate .portrait img{width:48px; height:48px;}\n  .plate .info{flex:1; min-width:0;}\n  .plate .id-row{font-size:12px; color:var(--muted); letter-spacing:.02em; margin-bottom:3px;}\n  .plate h2{font-size:18px; margin:0 0 10px; font-weight:800; word-break:break-word;}\n\n  .badge{display:inline-block; font-size:12px; font-weight:700; padding:5px 14px; border-radius:999px;}\n  .badge.released{background:rgba(47,174,102,.12); color:#2fae66; border:1px solid rgba(47,174,102,.35);}\n  .badge.voting{background:rgba(245,166,35,.12); color:var(--gold); border:1px solid rgba(245,166,35,.35);}\n\n  .result-count{font-size:12px; color:var(--muted); text-align:right; margin:-2px 4px 0;}\n\n  .note-box{\n    background:var(--surface); border:1px solid var(--line); border-radius:10px;\n    padding:14px 16px;\n  }\n  .note-box p{font-size:12px; color:var(--muted); line-height:1.8; margin:0 0 6px;}\n  .note-box p:last-child{margin-bottom:0;}\n\u003c\/style\u003e\n\n\n\u003cdiv class=\"wrap\"\u003e\n\n  \u003ch1\u003e第5回 ファンと創る「アクリルスタンド」\u003cbr\u003e追加投票券\u003c\/h1\u003e\n  \u003cp class=\"lede\"\u003e\n    推しキャラのグッズ化は、あなたの1票から。\n    \u003cspan class=\"about-link\"\u003e\u003ca href=\"https:\/\/monstore.monster-strike.com\/pages\/about-fan-kyoso-goods\"\u003e「ファンと創る」企画について詳しくはこちら＞\u003c\/a\u003e\u003c\/span\u003e\n  \u003c\/p\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すでに商品化済みのキャラクター（2,270体）は投票対象外です。\u003c\/p\u003e\n    \u003ca class=\"campaign-link\" href=\"https:\/\/monstore.monster-strike.com\/blogs\/column\/260910\"\u003e第5回ファンと創る「アクリルスタンド」の企画詳細はこちら＞\u003c\/a\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"rate-table\"\u003e\n    \u003cdiv class=\"rate-card\"\u003e\n      \u003cdiv class=\"rate-name\"\u003e1票券\u003c\/div\u003e\n      \u003cdiv class=\"rate-pt\"\u003e20pt\u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"rate-card\"\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\/div\u003e\n    \u003cdiv class=\"rate-card\"\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    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003ch2 class=\"search-heading\"\u003e投票したいキャラクターを検索する\u003c\/h2\u003e\n\n  \u003cdiv class=\"element-tabs\" id=\"elementTabs\"\u003e\n    \u003cbutton data-el=\"all\"\u003e\u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_all_50x.png\" alt=\"すべて\"\u003e\u003cspan\u003eすべて\u003c\/span\u003e\u003c\/button\u003e\n    \u003cbutton data-el=\"fire\"\u003e\u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_fire_50x.png\" alt=\"火\"\u003e\u003cspan\u003e火\u003c\/span\u003e\u003c\/button\u003e\n    \u003cbutton data-el=\"water\"\u003e\u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_water_50x.png\" alt=\"水\"\u003e\u003cspan\u003e水\u003c\/span\u003e\u003c\/button\u003e\n    \u003cbutton data-el=\"wood\"\u003e\u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_plant_50x.png\" alt=\"木\"\u003e\u003cspan\u003e木\u003c\/span\u003e\u003c\/button\u003e\n    \u003cbutton data-el=\"light\"\u003e\u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_light_50x.png\" alt=\"光\"\u003e\u003cspan\u003e光\u003c\/span\u003e\u003c\/button\u003e\n    \u003cbutton data-el=\"dark\"\u003e\u003cimg src=\"https:\/\/monstore.monster-strike.com\/cdn\/shop\/files\/icon_zokusei_dark_50x.png\" alt=\"闇\"\u003e\u003cspan\u003e闇\u003c\/span\u003e\u003c\/button\u003e\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  \u003cdiv class=\"hint\"\u003e\n    \u003cbutton type=\"button\" id=\"clearBtn\"\u003eクリア\u003c\/button\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv id=\"result-area\"\u003e\n    \u003cdiv class=\"idle-box\"\u003e属性を選ぶか、キャラクター名・図鑑番号を入力して検索してください。\u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"note-box\"\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\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 = [];\nconst DATA_URL = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0561\/4121\/7975\/files\/characters20290904.json?v=1788509917\";\n\nconst ELEMENT_LABEL = { fire:\"火\", water:\"水\", wood:\"木\", light:\"光\", dark:\"闇\" };\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; \/\/ null = 未選択, 'all' | 'fire' | 'water' | 'wood' | 'light' | 'dark'\n\nconst IDLE_MSG = `\u003cdiv class=\"idle-box\"\u003e属性を選ぶか、キャラクター名・図鑑番号を入力して検索してください。\u003c\/div\u003e`;\nconst LOADING_MSG = `\u003cdiv class=\"idle-box\"\u003eデータを読み込み中です…\u003c\/div\u003e`;\nconst LOAD_ERROR_MSG = `\u003cdiv class=\"error-box\"\u003e\u003cstrong\u003eデータを読み込めませんでした\u003c\/strong\u003e時間をおいて再度お試しください。\u003c\/div\u003e`;\n\nlet dataLoaded = false;\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 = IDLE_MSG;\n  })\n  .catch(err =\u003e {\n    console.error('データ読み込みエラー:', err);\n    resultArea.innerHTML = LOAD_ERROR_MSG;\n  });\n\nfunction matchesElement(c) {\n  return activeTab === null || activeTab === 'all' || c.element === activeTab;\n}\n\nfunction search(query) {\n  const q = query.trim().toLowerCase();\n  const padded = q ? q.replace(\/^0+\/, '').padStart(4, '0') : null;\n\n  return CHARACTERS.filter(c =\u003e {\n    if (!matchesElement(c)) return false;\n    if (!q) return true;\n    return c.id === q || c.id === padded || c.name.toLowerCase().includes(q);\n  });\n}\n\nfunction plateHTML(c) {\n  const badgeClass = c.status === 'released' ? 'released' : 'voting';\n  const badgeLabel = c.status === 'released' ? '商品化済み' : '投票対象';\n  return `\n    \u003cdiv class=\"plate\"\u003e\n      \u003cdiv class=\"portrait\"\u003e\n        \u003cimg src=\"${ICON[c.element]}\" alt=\"${ELEMENT_LABEL[c.element]}\"\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"info\"\u003e\n        \u003cdiv class=\"id-row\"\u003eNo.${c.id}　属性：${ELEMENT_LABEL[c.element]}\u003c\/div\u003e\n        \u003ch2\u003e${c.name}\u003c\/h2\u003e\n        \u003cspan class=\"badge ${badgeClass}\"\u003e${badgeLabel}\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e`;\n}\n\nfunction render() {\n  if (!dataLoaded) return;\n\n  const hasInput = input.value.trim() !== '' || activeTab !== null;\n  if (!hasInput) {\n    resultArea.innerHTML = IDLE_MSG;\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      \u003c\/div\u003e`;\n    return;\n  }\n\n  const countLabel = results.length \u003e 1 ? `\u003cdiv class=\"result-count\"\u003e${results.length}件見つかりました\u003c\/div\u003e` : '';\n  resultArea.innerHTML = countLabel + results.map(plateHTML).join('');\n}\n\nsearchBtn.addEventListener('click', () =\u003e {\n  render();\n});\n\ninput.addEventListener('keydown', (e) =\u003e {\n  if (e.key === 'Enter') render();\n});\n\ntabButtons.forEach(btn =\u003e {\n  btn.addEventListener('click', () =\u003e {\n    const isAlreadyActive = btn.classList.contains('active');\n    tabButtons.forEach(b =\u003e b.classList.remove('active'));\n    if (isAlreadyActive) {\n      activeTab = null;\n    } else {\n      btn.classList.add('active');\n      activeTab = btn.dataset.el;\n    }\n    render();\n  });\n});\n\nclearBtn.addEventListener('click', () =\u003e {\n  input.value = '';\n  tabButtons.forEach(b =\u003e b.classList.remove('active'));\n  activeTab = null;\n  resultArea.innerHTML = IDLE_MSG;\n});\n\u003c\/script\u003e\n\n\n\u003c\/body\u003e","products":[],"url":"https:\/\/monstore.monster-strike.com\/collections\/fantsuku05.oembed","provider":"モンストア","version":"1.0","type":"link"}