{"id":12585,"date":"2026-08-24T10:38:26","date_gmt":"2026-08-24T01:38:26","guid":{"rendered":"https:\/\/chicodori.net\/?p=12585"},"modified":"2026-08-24T10:38:27","modified_gmt":"2026-08-24T01:38:27","slug":"%e5%a4%a7%e3%81%8d%e3%81%84%e6%95%b0%e3%82%8f%e3%81%8b%e3%82%8b%e3%81%8b%e3%81%aa%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/chicodori.net\/?p=12585","title":{"rendered":"\u5927\u304d\u3044\u6570\u308f\u304b\u308b\u304b\u306a\uff1f"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u5927\u304d\u3044\u6570\u306e\u3057\u304f\u307f\u3092\u3001\u30b2\u30fc\u30e0\u3067\u697d\u3057\u304f\u7df4\u7fd2\uff01<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c10\u304c\u3044\u304f\u3064\u300d\u300c1\u304c\u3044\u304f\u3064\u300d\u3092\u8003\u3048\u306a\u304c\u3089\u3001\u25a1\u306b\u3042\u3066\u306f\u307e\u308b\u6570\u3092\u7b54\u3048\u308b\u30b2\u30fc\u30e0\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-word-balloon-word-balloon-block\"><div class=\"w_b_box w_b_w100 w_b_flex w_b_div\"><div class=\"w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div\" style=\"\"><div class=\"w_b_ava_box w_b_relative w_b_ava_L w_b_f_n w_b_div\"><div class=\"w_b_icon_wrap w_b_relative w_b_div\"><div class=\"w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div\"><div class=\"w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div\" style=\"\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/chicodori.net\/wp-content\/uploads\/2022\/05\/chico.jpg\" width=\"96\" height=\"96\" alt=\"\" class=\"w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img\" style=\"\" \/>\n<\/div><\/div><\/div><\/div><div class=\"w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div\"><div class=\"w_b_space w_b_mp0 w_b_div\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"1\" height=\"38\" viewBox=\"0 0 1 1\" fill=\"transparent\" stroke=\"transparent\" stroke-miterlimit=\"10\" class=\"w_b_db w_b_mp0\"><polygon fill=\"transparent\" stroke=\"transparent\" points=\"0,1 0,1 0,1 0,1 \"\/><\/svg><\/div><div class=\"w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div\" style=\"\"><div class=\"w_b_bal_wrap w_b_bal_wrap_L w_b_div\"><div class=\"w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div\"><div class=\"w_b_quote w_b_div\"><p>10\u304c\u3044\u304f\u3064\u30011\u304c\u3044\u304f\u3064\u96c6\u307e\u308b\u3068\u3001\u3069\u3093\u306a\u6570\u306b\u306a\u308b\u304b\u306a\uff1f<br>\u25a1\u306b\u3042\u3066\u306f\u307e\u308b\u6570\u5b57\u3092\u5165\u308c\u306a\u304c\u3089\u3001\u300c\u5341\u306e\u304f\u3089\u3044\u300d\u300c\u4e00\u306e\u304f\u3089\u3044\u300d\u306b\u6ce8\u76ee\u3057\u3066\u3001\u5927\u304d\u3044\u6570\u306e\u3057\u304f\u307f\u3092\u898b\u3064\u3051\u3066\u307f\u3088\u3046\uff01<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u25a0\u3069\u3093\u306a\u30b2\u30fc\u30e0\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u554f\u984c\u306e\u25a1\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3068\u3001\u6570\u5b57\u306e\u30dc\u30bf\u30f3\u304c\u767b\u5834\uff01<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u5b57\u3092\u9078\u3093\u3067\u3001\u25a1\u306b\u3042\u3066\u306f\u307e\u308b\u6570\u3092\u7b54\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c43\u306f10\u3092\u4f55\u3053\u3068\u30011\u3092\u4f55\u3053\u96c6\u3081\u305f\u6570\uff1f\u300d<br>\u300c\u5341\u306e\u304f\u3089\u3044\u3001\u4e00\u306e\u304f\u3089\u3044\u306e\u6570\u5b57\u306f\uff1f\u300d<br>\u300c10\u30926\u3053\u3068\u30011\u30923\u3053\u96c6\u3081\u305f\u6570\u306f\uff1f\u300d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u306a\u3069\u3001\u3044\u308d\u3044\u308d\u306a\u805e\u304b\u308c\u65b9\u306b\u30c1\u30e3\u30ec\u30f3\u30b8\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u25a0\u3055\u3042\u3001\u3084\u3063\u3066\u307f\u3088\u3046\uff01<\/h3>\n\n\n<div class=\"ifw_wrap ifw_center\"><button class=\"ifw_btn\" data-postid=\"12585\" data-buttoncount=\"1\">\u3053\u308c\u597d\u304d<span class=\"material-symbols-rounded\">favorite<\/span><span class=\"ifw_count\" id=\"ifw_count_12585_1\">0<\/span><\/button><div class=\"ifw_message_wrap ifw_top_left\" id=\"ifw_message_12585_1\"><div class=\"ifw_message\"><div class=\"ifw_text\"><p class=\"ifw_processing\">\u9001\u4fe1\u4e2d\u3067\u3059<\/p><\/div><\/div><div class=\"ifw_arrow\"><\/div><\/div><div class=\"ifw_message_wrap ifw_top_left ifw_thanks\" id=\"ifw_thanks_12585_1\"><div class=\"ifw_close\" data-id=\"12585_1\">\u00d7<\/div><div class=\"ifw_message\"><div class=\"ifw_image\"><img decoding=\"async\" src=\"\" id=\"ifw_image_12585_1\"><\/div><div class=\"ifw_text\" id=\"ifw_showmessage_12585_1\"><\/div><\/div><div class=\"ifw_arrow\"><\/div><\/div><\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n#big-number-game,\n#big-number-game *{\n  box-sizing:border-box;\n}\n\n.bng-game{\n  position:relative;\n  max-width:760px;\n  margin:20px auto;\n  padding:18px;\n  background:linear-gradient(\n    180deg,\n    #eaf8ff 0%,\n    #fff8fb 100%\n  );\n  border:4px solid #78c9f4;\n  border-radius:28px;\n  box-shadow:0 7px 0 #4aa7d8;\n  font-family:\n    \"Hiragino Maru Gothic ProN\",\n    \"Yu Gothic\",\n    sans-serif;\n  color:#334155;\n  text-align:center;\n  overflow:hidden;\n}\n\n.bng-title{\n  margin:0 0 6px;\n  font-size:30px;\n  color:#3288d1;\n  font-weight:800;\n  letter-spacing:2px;\n}\n\n.bng-lead{\n  margin-bottom:8px;\n  font-size:15px;\n  font-weight:bold;\n  color:#53657a;\n}\n\n.bng-progress{\n  display:inline-block;\n  margin-bottom:14px;\n  padding:5px 14px;\n  background:#fff5b8;\n  border:2px solid #f2cf4d;\n  border-radius:999px;\n  font-size:14px;\n  font-weight:bold;\n  color:#8a6500;\n}\n\n.bng-card{\n  position:relative;\n  padding:26px 16px;\n  background:#fff;\n  border:3px solid #a9dcf8;\n  border-radius:22px;\n  box-shadow:0 4px 0 #d5edf9;\n}\n\n.bng-question{\n  font-size:22px;\n  font-weight:bold;\n  line-height:2.1;\n  color:#334155;\n}\n\n.bng-input{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n\n  min-width:56px;\n  height:56px;\n  margin:0 5px;\n\n  padding:0 8px;\n\n  background:#f5fbff;\n  border:3px solid #63bdf0;\n  border-radius:14px;\n\n  color:#2273b8;\n  font-size:28px;\n  font-weight:800;\n\n  cursor:pointer;\n  vertical-align:middle;\n\n  box-shadow:0 4px 0 #a8d9f3;\n\n  transition:\n    transform .15s ease,\n    background .15s ease,\n    border-color .15s ease;\n}\n\n.bng-input:hover{\n  transform:translateY(-2px);\n}\n\n.bng-input.active{\n  background:#fff3a6;\n  border-color:#f2bd38;\n  box-shadow:\n    0 4px 0 #d9a321,\n    0 0 0 5px rgba(242,189,56,.18);\n}\n\n.bng-input.filled{\n  background:#eaf7ff;\n}\n\n.bng-input-wide{\n  min-width:82px;\n}\n\n.bng-number-panel{\n  display:none;\n  max-width:330px;\n  margin:18px auto 0;\n  padding:14px;\n  background:#fff8dc;\n  border:3px solid #f5c84c;\n  border-radius:20px;\n  box-shadow:0 5px 0 #e4b93e;\n}\n\n.bng-number-panel.show{\n  display:block;\n}\n\n.bng-number-title{\n  margin-bottom:10px;\n  font-size:15px;\n  font-weight:bold;\n  color:#8c6500;\n}\n\n.bng-number-buttons{\n  display:grid;\n  grid-template-columns:repeat(5,1fr);\n  gap:8px;\n}\n\n.bng-number{\n  min-height:52px;\n\n  border:3px solid #8bcdf2;\n  border-radius:13px;\n\n  background:#fff;\n\n  box-shadow:0 4px 0 #57aee0;\n\n  font-size:23px;\n  font-weight:800;\n\n  cursor:pointer;\n\n  transition:\n    transform .12s ease,\n    filter .12s ease;\n}\n\n.bng-number:nth-child(3n+1){\n  background:#fff0f5;\n  border-color:#f29ab7;\n  box-shadow:0 4px 0 #d96f92;\n}\n\n.bng-number:nth-child(3n+2){\n  background:#eef9ff;\n}\n\n.bng-number:nth-child(3n){\n  background:#f3ffe9;\n  border-color:#8ed17a;\n  box-shadow:0 4px 0 #61ae4e;\n}\n\n.bng-number:hover{\n  filter:brightness(1.03);\n}\n\n.bng-number:active{\n  transform:translateY(3px);\n  box-shadow:none;\n}\n\n.bng-number-tools{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:8px;\n  margin-top:11px;\n}\n\n.bng-number-tool{\n  min-height:46px;\n  padding:7px 10px;\n  border-radius:12px;\n  font-size:15px;\n  font-weight:bold;\n  cursor:pointer;\n}\n\n#bngDelete{\n  background:#ffe3ec;\n  border:2px solid #ef91ae;\n  box-shadow:0 3px 0 #d97896;\n}\n\n.bng-number-ok{\n  background:#dcfce7;\n  border:2px solid #6ac985;\n  box-shadow:0 3px 0 #4ca765;\n}\n\n.bng-answer-btn{\n  margin-top:20px;\n  padding:12px 34px;\n\n  background:#dffbe7;\n  border:3px solid #5dc77c;\n  border-radius:15px;\n  box-shadow:0 5px 0 #3ea45d;\n\n  font-size:19px;\n  font-weight:800;\n\n  cursor:pointer;\n}\n\n.bng-answer-btn:active{\n  transform:translateY(3px);\n  box-shadow:none;\n}\n\n.bng-message{\n  min-height:28px;\n  margin-top:12px;\n  font-size:18px;\n  font-weight:bold;\n}\n\n.bng-wrong{\n  color:#e05252;\n}\n\n.bng-finish-score{\n  margin:15px 0;\n  font-size:44px;\n  font-weight:bold;\n  color:#397fc1;\n}\n\n.bng-restart{\n  margin-top:15px;\n  padding:11px 26px;\n\n  background:#fff3c4;\n  border:2px solid #f4b860;\n  border-radius:13px;\n  box-shadow:0 3px 0 #d9973d;\n\n  font-size:17px;\n  font-weight:bold;\n  cursor:pointer;\n}\n\n\n\/* ========================================\n   \u6b63\u89e3\u6f14\u51fa\n======================================== *\/\n\n.bng-correct-overlay{\n  position:absolute;\n  inset:0;\n  z-index:50;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  pointer-events:none;\n}\n\n\/* \u305b\u3044\u304b\u3044\uff01 *\/\n\n.bng-correct-burst{\n  position:relative;\n\n  padding:18px 38px 20px;\n\n  background:#fff;\n  border:5px solid #ff7ca5;\n  border-radius:24px;\n\n  box-shadow:\n    0 8px 0 #ffb4ca,\n    0 12px 25px rgba(0,0,0,.15);\n\n  transform:rotate(-2deg);\n\n  animation:bngCorrectPop .45s\n    cubic-bezier(.18,.89,.32,1.28);\n}\n\n\/* \u5468\u56f2\u306e\u98fe\u308a *\/\n\n.bng-correct-burst::before{\n  content:\"\u2605\";\n  position:absolute;\n  top:-24px;\n  left:-20px;\n\n  color:#ffd43b;\n  font-size:35px;\n\n  transform:rotate(-20deg);\n}\n\n.bng-correct-burst::after{\n  content:\"\u2605\";\n  position:absolute;\n  right:-21px;\n  bottom:-22px;\n\n  color:#59c8ff;\n  font-size:31px;\n\n  transform:rotate(18deg);\n}\n\n.bng-correct-title{\n  font-size:44px;\n  font-weight:900;\n  line-height:1;\n\n  color:#ff4f7b;\n\n  letter-spacing:4px;\n}\n\n.bng-correct-answer{\n  display:none;\n}\n\n.bng-correct-sub{\n  margin-top:10px;\n\n  color:#398bc5;\n\n  font-size:16px;\n  font-weight:800;\n\n  letter-spacing:1px;\n}\n\n\n\/* \u6b63\u89e3POP *\/\n\n@keyframes bngCorrectPop{\n\n  0%{\n    opacity:0;\n    transform:\n      scale(.4)\n      rotate(-8deg);\n  }\n\n  65%{\n    opacity:1;\n    transform:\n      scale(1.12)\n      rotate(2deg);\n  }\n\n  100%{\n    transform:\n      scale(1)\n      rotate(-2deg);\n  }\n}\n\/* ========================================\n   \u7d19\u5439\u96ea\n======================================== *\/\n\n.bng-confetti{\n  position:absolute;\n  top:-20px;\n  width:10px;\n  height:16px;\n  border-radius:2px;\n  animation:bngConfettiFall 1.3s linear forwards;\n}\n\n@keyframes bngConfettiFall{\n\n  0%{\n    transform:\n      translateY(-20px)\n      rotate(0deg);\n    opacity:1;\n  }\n\n  100%{\n    transform:\n      translateY(520px)\n      rotate(720deg);\n    opacity:0;\n  }\n}\n\n@keyframes bngOverlayIn{\n\n  from{\n    opacity:0;\n  }\n\n  to{\n    opacity:1;\n  }\n}\n\n@keyframes bngPop{\n\n  0%{\n    transform:scale(.6);\n  }\n\n  70%{\n    transform:scale(1.08);\n  }\n\n  100%{\n    transform:scale(1);\n  }\n}\n\n\n\/* ========================================\n   \u30b9\u30de\u30db\n======================================== *\/\n\n@media(max-width:520px){\n\n  .bng-game{\n    padding:11px;\n  }\n\n  .bng-title{\n    font-size:24px;\n  }\n\n  .bng-card{\n    padding:20px 9px;\n  }\n\n  .bng-question{\n    font-size:19px;\n    line-height:2.2;\n  }\n\n  .bng-input{\n    min-width:48px;\n    height:48px;\n    font-size:23px;\n  }\n\n  .bng-input-wide{\n    min-width:72px;\n  }\n\n  .bng-number-panel{\n    max-width:300px;\n  }\n\n  .bng-number{\n    min-height:47px;\n    font-size:20px;\n  }\n\n  .bng-correct-burst{\n    width:190px;\n  }\n\n  .bng-correct-title{\n    font-size:38px;\n  }\n\n  .bng-correct-answer{\n    font-size:32px;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\",()=>{\n\n  const app=document.getElementById(\"big-number-game\");\n  if(!app)return;\n\n  const TOTAL=10;\n\n  let current=0;\n  let score=0;\n  let question=null;\n  let activeInput=null;\n  let answers=[];\n\n\n  \/* =========================\n     \u4e71\u6570\n  ========================= *\/\n\n  function rand(min,max){\n\n    return Math.floor(\n      Math.random()*(max-min+1)\n    )+min;\n\n  }\n\n\n  \/* =========================\n     \u554f\u984c\u3092\u4f5c\u308b\n  ========================= *\/\n\n  function makeQuestion(){\n\n    const type=rand(1,4);\n\n    const tens=rand(1,9);\n    const ones=rand(0,9);\n\n    const number=tens*10+ones;\n\n\n    \/* 43\u306f10\u30924\u3053\u3068\u30011\u30923\u3053 *\/\n\n    if(type===1){\n\n      return{\n        type:1,\n        number,\n        tens,\n        ones,\n        answers:[\n          String(tens),\n          String(ones)\n        ],\n        maxLength:[\n          1,\n          1\n        ]\n      };\n\n    }\n\n\n    \/* \u5341\u306e\u304f\u3089\u3044\u30fb\u4e00\u306e\u304f\u3089\u3044 *\/\n\n    if(type===2){\n\n      return{\n        type:2,\n        number,\n        tens,\n        ones,\n        answers:[\n          String(tens),\n          String(ones)\n        ],\n        maxLength:[\n          1,\n          1\n        ]\n      };\n\n    }\n\n\n    \/* 10\u30925\u3053\u3068\u30011\u30922\u3053 \u2192 52 *\/\n\n    if(type===3){\n\n      return{\n        type:3,\n        number,\n        tens,\n        ones,\n        answers:[\n          String(number)\n        ],\n        maxLength:[\n          2\n        ]\n      };\n\n    }\n\n\n    \/* 67\u306f60\u30687\u3092\u3042\u308f\u305b\u305f\u6570 *\/\n\n    return{\n      type:4,\n      number,\n      tens,\n      ones,\n      tensNumber:tens*10,\n      answers:[\n        String(ones)\n      ],\n      maxLength:[\n        1\n      ]\n    };\n\n  }\n\n\n  \/* =========================\n     \u554f\u984c\u6587\n  ========================= *\/\n\n  function questionHTML(q){\n\n    if(q.type===1){\n\n      return `\n        ${q.number}\u306f\n        10\u3092\n        <button\n          type=\"button\"\n          class=\"bng-input\"\n          data-index=\"0\"\n        ><\/button>\n        \u3053\u3068\u3001\n        <br>\n        1\u3092\n        <button\n          type=\"button\"\n          class=\"bng-input\"\n          data-index=\"1\"\n        ><\/button>\n        \u3053 \u3042\u3064\u3081\u305f \u304b\u305a\u3067\u3059\u3002\n      `;\n\n    }\n\n\n    if(q.type===2){\n\n      return `\n        ${q.number}\u306e\n        \u5341\u306e\u304f\u3089\u3044\u306e \u3059\u3046\u3058\u306f\n        <button\n          type=\"button\"\n          class=\"bng-input\"\n          data-index=\"0\"\n        ><\/button>\n        \u3067\u3001\n        <br>\n        \u4e00\u306e\u304f\u3089\u3044\u306e \u3059\u3046\u3058\u306f\n        <button\n          type=\"button\"\n          class=\"bng-input\"\n          data-index=\"1\"\n        ><\/button>\n        \u3067\u3059\u3002\n      `;\n\n    }\n\n\n    if(q.type===3){\n\n      return `\n        10\u3092 ${q.tens}\u3053\u3068\u3001\n        1\u3092 ${q.ones}\u3053\n        <br>\n        \u3042\u3064\u3081\u305f \u304b\u305a\u306f\n        <button\n          type=\"button\"\n          class=\"bng-input bng-input-wide\"\n          data-index=\"0\"\n        ><\/button>\n        \u3067\u3059\u3002\n      `;\n\n    }\n\n\n    return `\n      ${q.number}\u306f\n      ${q.tensNumber}\u3068\n      <button\n        type=\"button\"\n        class=\"bng-input\"\n        data-index=\"0\"\n      ><\/button>\n      \u3092\n      <br>\n      \u3042\u308f\u305b\u305f \u304b\u305a\u3067\u3059\u3002\n    `;\n\n  }\n\n\n  \/* =========================\n     \u8868\u793a\n  ========================= *\/\n\n  function render(){\n\n    question=makeQuestion();\n\n    answers=\n      new Array(\n        question.answers.length\n      ).fill(\"\");\n\n    activeInput=null;\n\n\n    app.innerHTML=`\n\n      <div class=\"bng-game\">\n\n        <h2 class=\"bng-title\">\n          \u5927\u304d\u3044\u6570\n        <\/h2>\n\n        <div class=\"bng-lead\">\n          \u25a1\u3092\u30bf\u30c3\u30d7\u3057\u3066\n          \u304b\u305a\u3092 \u3044\u308c\u3088\u3046\uff01\n        <\/div>\n\n        <div class=\"bng-progress\">\n          ${current+1}\u3082\u3093\u3081 \/ ${TOTAL}\u3082\u3093\n        <\/div>\n\n\n        <div class=\"bng-card\">\n\n          <div class=\"bng-question\">\n            ${questionHTML(question)}\n          <\/div>\n\n\n          <div\n            class=\"bng-number-panel\"\n            id=\"bngNumberPanel\"\n          >\n\n            <div class=\"bng-number-title\">\n              \u3059\u3046\u3058\u3092 \u3048\u3089\u307c\u3046\uff01\n            <\/div>\n\n\n            <div class=\"bng-number-buttons\">\n\n              ${[1,2,3,4,5,6,7,8,9,0]\n                .map(n=>`\n\n                  <button\n                    type=\"button\"\n                    class=\"bng-number\"\n                    data-number=\"${n}\"\n                  >\n                    ${n}\n                  <\/button>\n\n                `)\n                .join(\"\")}\n\n            <\/div>\n\n\n            <div class=\"bng-number-tools\">\n\n              <button\n                type=\"button\"\n                class=\"bng-number-tool\"\n                id=\"bngDelete\"\n              >\n                \u3051\u3059\n              <\/button>\n\n              <button\n                type=\"button\"\n                class=\"bng-number-tool bng-number-ok\"\n                id=\"bngNumberOK\"\n              >\n                \u304d\u3081\u308b\n              <\/button>\n\n            <\/div>\n\n          <\/div>\n\n\n          <button\n            type=\"button\"\n            class=\"bng-answer-btn\"\n            id=\"bngAnswerBtn\"\n          >\n            \u3053\u305f\u3048\u308b\n          <\/button>\n\n\n          <div\n            class=\"bng-message\"\n            id=\"bngMessage\"\n          ><\/div>\n\n        <\/div>\n\n      <\/div>\n    `;\n\n\n    bindEvents();\n\n  }\n\n\n  \/* =========================\n     \u30a4\u30d9\u30f3\u30c8\n  ========================= *\/\n\n  function bindEvents(){\n\n    app.querySelectorAll(\".bng-input\")\n      .forEach(input=>{\n\n        input.addEventListener(\"click\",()=>{\n\n          activeInput=\n            Number(input.dataset.index);\n\n\n          app.querySelectorAll(\".bng-input\")\n            .forEach(el=>{\n\n              el.classList.toggle(\n                \"active\",\n                el===input\n              );\n\n            });\n\n\n          document\n            .getElementById(\"bngNumberPanel\")\n            .classList.add(\"show\");\n\n        });\n\n      });\n\n\n    app.querySelectorAll(\".bng-number\")\n      .forEach(btn=>{\n\n        btn.addEventListener(\"click\",()=>{\n\n          if(activeInput===null)return;\n\n\n          const n=\n            btn.dataset.number;\n\n\n          const max=\n            question.maxLength[activeInput];\n\n\n          if(\n            answers[activeInput].length>=max\n          ){\n            return;\n          }\n\n\n          answers[activeInput]+=n;\n\n\n          updateInput();\n\n\n          if(max===1){\n\n            closeNumberPanel();\n\n          }\n\n        });\n\n      });\n\n\n    document\n      .getElementById(\"bngDelete\")\n      .addEventListener(\"click\",()=>{\n\n        if(activeInput===null)return;\n\n\n        answers[activeInput]=\n          answers[activeInput].slice(0,-1);\n\n\n        updateInput();\n\n      });\n\n\n    document\n      .getElementById(\"bngNumberOK\")\n      .addEventListener(\"click\",()=>{\n\n        if(activeInput===null)return;\n\n        if(answers[activeInput]===\"\")return;\n\n\n        closeNumberPanel();\n\n      });\n\n\n    document\n      .getElementById(\"bngAnswerBtn\")\n      .addEventListener(\n        \"click\",\n        checkAnswer\n      );\n\n  }\n\n\n  \/* =========================\n     \u25a1\u66f4\u65b0\n  ========================= *\/\n\n  function updateInput(){\n\n    if(activeInput===null)return;\n\n\n    const input=\n      app.querySelector(\n        `.bng-input[data-index=\"${activeInput}\"]`\n      );\n\n\n\tif(answers[activeInput]===\"\"){\n\t  input.textContent=\"\";\n\t  input.classList.remove(\"filled\");\n\t}else{\n\n      input.textContent=\n        answers[activeInput];\n\n      input.classList.add(\"filled\");\n\n    }\n\n  }\n\n\n  \/* =========================\n     \u6570\u5b57\u30d1\u30cd\u30eb\u9589\u3058\u308b\n  ========================= *\/\n\n  function closeNumberPanel(){\n\n    document\n      .getElementById(\"bngNumberPanel\")\n      .classList.remove(\"show\");\n\n\n    app.querySelectorAll(\".bng-input\")\n      .forEach(el=>{\n\n        el.classList.remove(\"active\");\n\n      });\n\n\n    activeInput=null;\n\n  }\n\n\n  \/* =========================\n     \u7b54\u3048\u5408\u308f\u305b\n  ========================= *\/\n\n  function checkAnswer(){\n\n    const message=\n      document.getElementById(\"bngMessage\");\n\n\n    if(\n      answers.some(v=>v===\"\")\n    ){\n\n      message.textContent=\n        \"\u307e\u3060 \u25a1 \u304c \u306e\u3053\u3063\u3066\u3044\u308b\u3088\uff01\";\n\n      message.className=\n        \"bng-message bng-wrong\";\n\n      return;\n    }\n\n\n    const correct=\n      answers.every(\n        (v,i)=>\n          v===question.answers[i]\n      );\n\n\n    if(correct){\n\n      score++;\n\n      showCorrect();\n\n    }else{\n\n      message.textContent=\n        \"\u3082\u3046\u3044\u3061\u3069 \u304b\u3093\u304c\u3048\u3066\u307f\u3088\u3046\uff01\";\n\n      message.className=\n        \"bng-message bng-wrong\";\n\n    }\n\n  }\n\n\n  \/* =========================\n     \u6b63\u89e3\u8868\u793a\n  ========================= *\/\n\n  function showCorrect(){\n\n    const game=\n      app.querySelector(\".bng-game\");\n\n\n    const overlay=\n      document.createElement(\"div\");\n\n\n    overlay.className=\n      \"bng-correct-overlay\";\n\n\n    const answerText=\n      question.answers.join(\"\u30fb\");\n\n\n    overlay.innerHTML=`\n\n      <div class=\"bng-correct-burst\">\n\n        <div class=\"bng-correct-title\">\n          \u305b\u3044\u304b\u3044\uff01\n        <\/div>\n\n        <div class=\"bng-correct-answer\">\n          ${answerText}\n        <\/div>\n\n        <div class=\"bng-correct-sub\">\n          \u3088\u304f\u3067\u304d\u307e\u3057\u305f\uff01\n        <\/div>\n\n      <\/div>\n\n    `;\n\n\n    game.appendChild(overlay);\n\n\n    makeConfetti(game);\n\n\n    setTimeout(()=>{\n\n      current++;\n\n\n      if(current>=TOTAL){\n\n        finish();\n\n      }else{\n\n        render();\n\n      }\n\n    },1400);\n\n  }\n\n\n  \/* =========================\n     \u7d19\u5439\u96ea\n  ========================= *\/\n\n  function makeConfetti(container){\n\n    const colors=[\n      \"#ff5f7e\",\n      \"#ffd84d\",\n      \"#59c8ff\",\n      \"#77d36b\",\n      \"#a987f5\",\n      \"#ff9e45\"\n    ];\n\n\n    for(let i=0;i<36;i++){\n\n      const piece=\n        document.createElement(\"span\");\n\n\n      piece.className=\n        \"bng-confetti\";\n\n\n      piece.style.left=\n        Math.random()*100+\"%\";\n\n\n      piece.style.background=\n        colors[\n          Math.floor(\n            Math.random()*colors.length\n          )\n        ];\n\n\n      piece.style.animationDelay=\n        Math.random()*.35+\"s\";\n\n\n      piece.style.transform=\n        `rotate(${Math.random()*360}deg)`;\n\n\n      container.appendChild(piece);\n\n    }\n\n  }\n\n\n  \/* =========================\n     \u7d42\u4e86\n  ========================= *\/\n\n  function finish(){\n\n    app.innerHTML=`\n\n      <div class=\"bng-game\">\n\n        <h2 class=\"bng-title\">\n          \u5927\u304d\u3044\u6570\n        <\/h2>\n\n        <div class=\"bng-card\">\n\n          <div\n            style=\"\n              font-size:24px;\n              font-weight:bold;\n            \"\n          >\n            \u304a\u3064\u304b\u308c\u3055\u307e\uff01\n          <\/div>\n\n\n          <div class=\"bng-finish-score\">\n            ${score} \/ ${TOTAL}\n          <\/div>\n\n\n          <div>\n            10\u306e\u307e\u3068\u307e\u308a\u3068\n            1\u306e\u307e\u3068\u307e\u308a\u304c\n            \u308f\u304b\u3063\u305f\u304b\u306a\uff1f\n          <\/div>\n\n\n          <button\n            type=\"button\"\n            class=\"bng-restart\"\n            id=\"bngRestart\"\n          >\n            \u3082\u3046\u3044\u3061\u3069\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\"bngRestart\")\n      .addEventListener(\"click\",()=>{\n\n        current=0;\n        score=0;\n\n        render();\n\n      });\n\n  }\n\n\n  render();\n\n});\n<\/script>\n\n<div id=\"big-number-game\"><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chicodori.net\/wp-content\/uploads\/2021\/06\/kodawari.png\" alt=\"\" style=\"width:197px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcd6 10\u306e\u307e\u3068\u307e\u308a\u3092\u610f\u8b58\u3067\u304d\u308b<br>\u305f\u3060\u6570\u5b57\u3092\u8aad\u3080\u3060\u3051\u3067\u306f\u306a\u304f\u3001\u300c43\uff1d10\u304c4\u3053\u30681\u304c3\u3053\u300d\u306e\u3088\u3046\u306b\u3001\u6570\u306e\u3057\u304f\u307f\u3092\u8003\u3048\u306a\u304c\u3089\u7df4\u7fd2\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcd6 \u3044\u308d\u3044\u308d\u306a\u805e\u304b\u308c\u65b9\u306b\u6311\u6226<br>\u300c\u6570\u3092\u5206\u3051\u308b\u300d\u300c\u4f4d\u3092\u7b54\u3048\u308b\u300d\u300c\u307e\u3068\u307e\u308a\u304b\u3089\u6570\u3092\u4f5c\u308b\u300d\u306a\u3069\u3001\u540c\u3058\u5185\u5bb9\u3092\u9055\u3046\u65b9\u5411\u304b\u3089\u8003\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcd6 \u6b63\u89e3\u304c\u697d\u3057\u3044\uff01<br>\u6b63\u89e3\u3059\u308b\u3068\u300c\u305b\u3044\u304b\u3044\uff01\u300d\u306e\u5927\u304d\u306a\u8868\u793a\u3068\u7d19\u5439\u96ea\u3067\u304a\u795d\u3044\u3002\u30c6\u30f3\u30dd\u3088\u304f\u6b21\u306e\u554f\u984c\u306b\u9032\u3081\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u25a0\u3053\u306e\u529b\u3001\u3069\u3093\u306a\u3068\u304d\u306b\u5f79\u7acb\u3064\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2728 \u305f\u3057\u7b97\u30fb\u3072\u304d\u7b97\u3092\u3059\u308b\u3068\u304d<\/strong><br>\u6570\u3092\u300c10\u306e\u307e\u3068\u307e\u308a\u300d\u3068\u300c1\u306e\u307e\u3068\u307e\u308a\u300d\u306b\u5206\u3051\u3066\u8003\u3048\u308b\u3053\u3068\u3067\u3001\u8a08\u7b97\u306e\u3057\u304f\u307f\u3092\u7406\u89e3\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2728 \u5927\u304d\u306a\u6570\u3092\u8aad\u3080\u3068\u304d<\/strong><br>\u5341\u306e\u304f\u3089\u3044\u30fb\u4e00\u306e\u304f\u3089\u3044\u306b\u6ce8\u76ee\u3059\u308b\u3053\u3068\u3067\u3001\u6570\u304c\u3069\u306e\u3088\u3046\u306b\u3067\u304d\u3066\u3044\u308b\u306e\u304b\u3092\u8003\u3048\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2728 2\u5e74\u751f\u306e\u7b97\u6570\u3092\u5b66\u3076\u3068\u304d<\/strong><br>100\u3088\u308a\u5927\u304d\u306a\u6570\u3084\u3001\u4f4d\u3092\u4f7f\u3063\u305f\u5b66\u7fd2\u306b\u3064\u306a\u304c\u308b\u5927\u5207\u306a\u529b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u4fdd\u8b77\u8005\u3001\u5148\u751f\u65b9\u3078<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1\u5e74\u751f\u3067\u5b66\u7fd2\u3059\u308b\u300c\u5927\u304d\u3044\u6570\u300d\u300c\u5341\u306e\u304f\u3089\u3044\u30fb\u4e00\u306e\u304f\u3089\u3044\u300d\u306e\u7406\u89e3\u3092\u6df1\u3081\u308b\u30b2\u30fc\u30e0\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u5b57\u3092\u6697\u8a18\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u300c10\u306e\u307e\u3068\u307e\u308a\u300d\u3068\u300c\u3070\u3089\u306e1\u300d\u306b\u5206\u3051\u305f\u308a\u3001\u53cd\u5bfe\u306b\u307e\u3068\u307e\u308a\u304b\u3089\u6570\u3092\u4f5c\u3063\u305f\u308a\u3059\u308b\u3053\u3068\u3067\u3001\u6570\u306e\u69cb\u6210\u3092\u7e70\u308a\u8fd4\u3057\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u25a1\u3092\u30bf\u30c3\u30d7\u3057\u3066\u6570\u5b57\u3092\u9078\u3076\u30b7\u30f3\u30d7\u30eb\u306a\u64cd\u4f5c\u306a\u306e\u3067\u3001\u4f4e\u5b66\u5e74\u306e\u304a\u5b50\u3055\u307e\u3067\u3082\u53d6\u308a\u7d44\u307f\u3084\u3059\u3044\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:422px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u5927\u304d\u3044\u6570\u306e\u3057\u304f\u307f\u3092\u3001\u30b2\u30fc\u30e0\u3067\u697d\u3057\u304f\u7df4\u7fd2\uff01 \u300c10\u304c\u3044\u304f\u3064\u300d\u300c1\u304c\u3044\u304f\u3064\u300d\u3092\u8003\u3048\u306a\u304c\u3089\u3001\u25a1\u306b\u3042\u3066\u306f\u307e\u308b\u6570\u3092\u7b54\u3048\u308b\u30b2\u30fc\u30e0\u3067\u3059\u3002 \u25a0\u3069\u3093\u306a\u30b2\u30fc\u30e0\uff1f \u554f\u984c\u306e\u25a1\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3068\u3001\u6570\u5b57\u306e\u30dc\u30bf\u30f3\u304c\u767b\u5834\uff01 \u6570\u5b57\u3092\u9078\u3093\u3067\u3001\u25a1\u306b\u3042\u3066\u306f\u307e\u308b\u6570\u3092 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,3],"tags":[45,116,1964],"class_list":["post-12585","post","type-post","status-publish","format-standard","hentry","category-9","category-3","tag-45","tag-116","tag-1964","entry"],"_links":{"self":[{"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts\/12585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12585"}],"version-history":[{"count":1,"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts\/12585\/revisions"}],"predecessor-version":[{"id":12586,"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts\/12585\/revisions\/12586"}],"wp:attachment":[{"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}