{"id":12076,"date":"2026-07-20T08:10:00","date_gmt":"2026-07-19T23:10:00","guid":{"rendered":"https:\/\/chicodori.net\/?p=12076"},"modified":"2026-06-08T21:35:44","modified_gmt":"2026-06-08T12:35:44","slug":"%e5%b0%8f3%e5%9b%bd%e8%aa%9e%e3%80%8c%e7%ac%a6%e5%8f%b7%ef%bc%88%e3%81%b5%e3%81%94%e3%81%86%ef%bc%89%e3%81%be%e3%81%a1%e3%81%8c%e3%81%84%e7%9b%b4%e3%81%97%e3%80%8d","status":"publish","type":"post","link":"https:\/\/chicodori.net\/?p=12076","title":{"rendered":"\u5c0f3\u56fd\u8a9e\u300c\u7b26\u53f7\uff08\u3075\u3054\u3046\uff09\u307e\u3061\u304c\u3044\u76f4\u3057\u300d"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u3001\u7b26\u53f7\u306e\u4f7f\u3044\u65b9\u3092\u30b2\u30fc\u30e0\u611f\u899a\u3067\u697d\u3057\u304f\u5fa9\u7fd2\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\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 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>\u7b26\u53f7\u306f\u3001\u5bc4\u308a\u4f1d\u308f\u308a\u3084\u3059\u3044\u6587\u7ae0\u3092\u66f8\u304f\u305f\u3081\u306b\u5fc5\u8981\u3060\u306d<\/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\">4\u3064\u306e\u6587\u306e\u4e2d\u304b\u3089\u3001\u7b26\u53f7\u306e\u4f7f\u3044\u65b9\u304c\u6b63\u3057\u3044\u6587\u3092\u9078\u3076\u30b2\u30fc\u30e0\u3067\u3059\u3002<br>\u300c\u3001\u300d\u300c\u3002\u300d\u300c\u300d\u300c\u300e\u300f\u300d\u300c\uff1f\u300d\u300c\uff01\u300d\u300c\u30fb\u300d\u300c\u2026\u2026\u300d\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u7b26\u53f7\u304c\u767b\u5834\u3057\u307e\u3059\u3002<br>\u554f\u984c\u3092\u89e3\u304d\u306a\u304c\u3089\u3001\u6b63\u3057\u3044\u4f7f\u3044\u65b9\u3092\u697d\u3057\u304f\u5fa9\u7fd2\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=\"12076\" data-buttoncount=\"1\">\u3053\u308c\u597d\u304d<span class=\"material-symbols-rounded\">favorite<\/span><span class=\"ifw_count\" id=\"ifw_count_12076_1\">5<\/span><\/button><div class=\"ifw_message_wrap ifw_top_left\" id=\"ifw_message_12076_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_12076_1\"><div class=\"ifw_close\" data-id=\"12076_1\">\u00d7<\/div><div class=\"ifw_message\"><div class=\"ifw_image\"><img decoding=\"async\" src=\"\" id=\"ifw_image_12076_1\"><\/div><div class=\"ifw_text\" id=\"ifw_showmessage_12076_1\"><\/div><\/div><div class=\"ifw_arrow\"><\/div><\/div><\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n.punc-game {\n  max-width: 820px;\n  margin: 40px auto;\n  padding: 24px;\n  background: #fff7e8;\n  border: 3px solid #f2b84b;\n  border-radius: 24px;\n  font-family: \"Hiragino Sans\", \"Yu Gothic\", sans-serif;\n  color: #333;\n}\n\n.punc-game * {\n  box-sizing: border-box;\n}\n\n.punc-game h2 {\n  text-align: center;\n  margin: 0 0 18px;\n  font-size: 28px;\n  color: #7a4a00;\n}\n\n.punc-top {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 18px;\n  font-weight: bold;\n}\n\n.punc-badge {\n  background: #fff;\n  border: 2px solid #f2b84b;\n  border-radius: 999px;\n  padding: 8px 14px;\n}\n\n.punc-question-box {\n  background: #fff;\n  border: 2px solid #e7c47a;\n  border-radius: 18px;\n  padding: 20px;\n  margin-bottom: 18px;\n}\n\n.punc-type {\n  display: inline-block;\n  background: #ffe39b;\n  border-radius: 999px;\n  padding: 6px 12px;\n  font-weight: bold;\n  margin-bottom: 12px;\n}\n\n.punc-question {\n  font-size: 20px;\n  line-height: 1.8;\n  font-weight: bold;\n}\n\n.punc-choices {\n  display: grid;\n  gap: 12px;\n}\n\n.punc-choice {\n  width: 100%;\n  text-align: left;\n  padding: 14px 16px;\n  border: 2px solid #d8b76c;\n  border-radius: 14px;\n  background: #fff;\n  font-size: 18px;\n  line-height: 1.6;\n  cursor: pointer;\n}\n\n.punc-choice:hover {\n  background: #fff0c9;\n}\n\n.punc-choice.correct {\n  background: #d9f8d2;\n  border-color: #50b848;\n}\n\n.punc-choice.wrong {\n  background: #ffd9d9;\n  border-color: #e04b4b;\n}\n\n.punc-message {\n  min-height: 44px;\n  margin-top: 16px;\n  font-size: 18px;\n  font-weight: bold;\n  line-height: 1.6;\n}\n\n.punc-next {\n  display: none;\n  margin: 12px auto 0;\n  padding: 12px 28px;\n  border: none;\n  border-radius: 999px;\n  background: #ff9800;\n  color: #fff;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n.punc-next.show {\n  display: block;\n}\n\n.punc-start {\n  text-align: center;\n}\n\n.punc-start button,\n.punc-restart {\n  padding: 14px 28px;\n  border: none;\n  border-radius: 999px;\n  background: #ff9800;\n  color: #fff;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n.punc-result {\n  text-align: center;\n  background: #fff;\n  border: 2px solid #e7c47a;\n  border-radius: 18px;\n  padding: 24px;\n}\n\n@media (max-width: 600px) {\n  .punc-game {\n    margin: 20px 10px;\n    padding: 18px;\n  }\n\n  .punc-question {\n    font-size: 18px;\n  }\n\n  .punc-choice {\n    font-size: 16px;\n  }\n}\n\n.punc-game.correct-flash {\n  animation: correctFlash 0.9s ease;\n}\n\n@keyframes correctFlash {\n  0% {\n    transform: scale(1);\n    box-shadow: 0 0 0 rgba(255, 193, 7, 0);\n  }\n  30% {\n    transform: scale(1.03);\n    box-shadow: 0 0 35px rgba(255, 193, 7, 0.9);\n  }\n  60% {\n    transform: scale(1.01);\n    box-shadow: 0 0 55px rgba(255, 152, 0, 0.8);\n  }\n  100% {\n    transform: scale(1);\n    box-shadow: none;\n  }\n}\n\n.punc-celebrate {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 9999;\n  display: grid;\n  place-items: center;\n  font-size: 52px;\n  font-weight: bold;\n  color: #ff9800;\n  text-shadow:\n    0 3px 0 #fff,\n    0 0 18px rgba(255, 193, 7, 0.9);\n  animation: popCelebrate 1.1s ease forwards;\n}\n\n@keyframes popCelebrate {\n  0% {\n    opacity: 0;\n    transform: scale(0.4) rotate(-8deg);\n  }\n  25% {\n    opacity: 1;\n    transform: scale(1.25) rotate(4deg);\n  }\n  70% {\n    opacity: 1;\n    transform: scale(1) rotate(0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.15) translateY(-20px);\n  }\n}\n\n.punc-star {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9998;\n  font-size: 28px;\n  animation: starBurst 1.1s ease-out forwards;\n}\n\n@keyframes starBurst {\n  0% {\n    opacity: 0;\n    transform: translate(0, 0) scale(0.3) rotate(0deg);\n  }\n  20% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform:\n      translate(var(--x), var(--y))\n      scale(1.2)\n      rotate(360deg);\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const app = document.getElementById(\"punctuation-game\");\n  if (!app) return;\n\n  const QUESTIONS = [\n    {\n      type: \"\u3001 \u8aad\u70b9\",\n      question: \"\u540c\u3058\u306a\u304b\u307e\u306e\u3053\u3068\u3070\u3092\u306a\u3089\u3079\u308b\u3068\u304d\u3001\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u8d64\u3001\u9752\u3001\u9ec4\u8272\u306e\u8272\u7d19\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002\",\n        \"\u8d64\u9752\u3001\u9ec4\u8272\u306e\u8272\u7d19\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002\",\n        \"\u8d64\u3001\u9752\u9ec4\u8272\u306e\u8272\u7d19\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002\",\n        \"\u8d64\u9752\u9ec4\u8272\u3001\u306e\u8272\u7d19\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002\"\n      ],\n      answer: 0,\n      explanation: \"\u306a\u3089\u3079\u308b\u8a00\u8449\u306e\u9593\u306b\u306f\u3001\u8aad\u70b9\u300c\u3001\u300d\u3092\u4f7f\u3044\u307e\u3059\u3002\"\n    },\n    {\n      type: \"\u3002 \u53e5\u70b9\",\n      question: \"\u6587\u306e\u7d42\u308f\u308a\u304c\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u4eca\u65e5\u306f\u9060\u8db3\u3067\u3059\",\n        \"\u4eca\u65e5\u306f\u9060\u8db3\u3067\u3059\u3002\",\n        \"\u4eca\u65e5\u306f\u3002\u9060\u8db3\u3067\u3059\",\n        \"\u4eca\u65e5\u306f\u9060\u8db3\u3002\u3067\u3059\"\n      ],\n      answer: 1,\n      explanation: \"\u6587\u306e\u7d42\u308f\u308a\u306b\u306f\u53e5\u70b9\u300c\u3002\u300d\u3092\u3064\u3051\u307e\u3059\u3002\"\n    },\n    {\n      type: \"\u300c\u300d \u304b\u304e\u304b\u3063\u3053\",\n      question: \"\u4eba\u304c\u8a00\u3063\u305f\u8a00\u8449\u306e\u66f8\u304d\u65b9\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u307c\u304f\u306f\u3001\u300c\u304a\u6bcd\u3055\u3093\u3001\u305f\u3060\u3044\u307e\u300d\u3002\u3068\u8a00\u3063\u305f\u3002\",\n        \"\u307c\u304f\u306f\u3001\u300c\u304a\u6bcd\u3055\u3093\u3001\u305f\u3060\u3044\u307e\u3002\u3068\u300d\u8a00\u3063\u305f\u3002\",\n        \"\u307c\u304f\u306f\u3001\u300c\u304a\u6bcd\u3055\u3093\u3001\u305f\u3060\u3044\u307e\u3002\u300d\u3068\u8a00\u3063\u305f\u3002\",\n        \"\u307c\u304f\u306f\u3001\u304a\u6bcd\u3055\u3093\u3001\u300c\u305f\u3060\u3044\u307e\u3002\u300d\u3068\u8a00\u3063\u305f\u3002\"\n      ],\n      answer: 2,\n      explanation: \"\u4eba\u304c\u8a00\u3063\u305f\u8a00\u8449\u306f\u300c\u300d\u3067\u56f2\u307f\u307e\u3059\u3002\u53e5\u70b9\u306f\u3001\u304b\u304e\u304b\u3063\u3053\u306e\u4e2d\u306b\u5165\u308c\u307e\u3059\u3002\"\n    },\n    {\n      type: \"\u300e\u300f \u4e8c\u91cd\u304b\u304e\",\n      question: \"\u300c\u300d\u306e\u4e2d\u3067\u3001\u3055\u3089\u306b\u8a00\u8449\u3092\u56f2\u3080\u3068\u304d\u306e\u66f8\u304d\u65b9\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u300c\u5148\u751f\u304c\u3001\u300e\u8eca\u306b\u6ce8\u610f\u3057\u306a\u3055\u3044\u3002\u300f\u3068\u8a00\u308f\u308c\u305f\u3088\u3002\u300d\",\n        \"\u300e\u5148\u751f\u304c\u3001\u300c\u8eca\u306b\u6ce8\u610f\u3057\u306a\u3055\u3044\u3002\u300d\u3068\u8a00\u308f\u308c\u305f\u3088\u3002\u300f\",\n        \"\u300c\u5148\u751f\u304c\u3001\u300e\u8eca\u306b\u6ce8\u610f\u3057\u306a\u3055\u3044\u3002\u3068\u300f\u8a00\u308f\u308c\u305f\u3088\u3002\u300d\",\n        \"\u300c\u5148\u751f\u304c\u3001\u300e\u8eca\u306b\u6ce8\u610f\u3057\u306a\u3055\u3044\u3002\u3068\u8a00\u308f\u308c\u305f\u300f\u3088\u3002\u300d\"\n      ],\n      answer: 0,\n      explanation: \"\u300c\u300d\u306e\u4e2d\u3067\u3001\u3055\u3089\u306b\u8a00\u8449\u3092\u56f2\u3080\u3068\u304d\u306f\u300e\u300f\u3092\u4f7f\u3044\u307e\u3059\u3002\"\n    },\n    {\n      type: \"\uff1f \u7591\u554f\u7b26\",\n      question: \"\u305f\u305a\u306d\u308b\u6587\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u3069\u3053\u3078\u884c\u304f\uff1f\u3002\",\n        \"\u3069\u3053\u3078\u884c\u304f\uff1f\",\n        \"\u3069\u3053\u3078\u884c\u304f\u3002\",\n        \"\u3069\u3053\u3078\uff1f\u884c\u304f\u3002\"\n      ],\n      answer: 1,\n      explanation: \"\u305f\u305a\u306d\u308b\u6c17\u6301\u3061\u3092\u8868\u3059\u3068\u304d\u306b\u300c\uff1f\u300d\u3092\u4f7f\u3044\u307e\u3059\u3002\u300c\uff1f\u3002\u300d\u3068\u306f\u3057\u307e\u305b\u3093\u3002\"\n    },\n    {\n      type: \"\uff01 \u611f\u5606\u7b26\",\n      question: \"\u304a\u3069\u308d\u304d\u3084\u5f37\u3044\u6c17\u6301\u3061\u3092\u8868\u3059\u6587\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u308f\u3042\uff01\u3002\",\n        \"\u308f\u3042\u3002\",\n        \"\u308f\u3042\uff01\",\n        \"\u308f\u3042\u3002\uff01\"\n      ],\n      answer: 2,\n      explanation: \"\u5f37\u3044\u6c17\u6301\u3061\u3092\u8868\u3059\u3068\u304d\u306b\u300c\uff01\u300d\u3092\u4f7f\u3044\u307e\u3059\u3002\u300c\uff01\u3002\u300d\u3068\u306f\u3057\u307e\u305b\u3093\u3002\"\n    },\n    {\n      type: \"\u30fb \u4e2d\u9ed2\",\n      question: \"\u540c\u3058\u7a2e\u985e\u306e\u8a00\u8449\u3092\u306a\u3089\u3079\u308b\u3068\u304d\u3001\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u6771\u4eac\u30fb\u5927\u962a\u30fb\u540d\u53e4\u5c4b\u3078\u884c\u304d\u307e\u3057\u305f\u3002\",\n        \"\u6771\u4eac\u5927\u962a\u30fb\u540d\u53e4\u5c4b\u3078\u884c\u304d\u307e\u3057\u305f\u3002\",\n        \"\u6771\u4eac\u30fb\u5927\u962a\u540d\u53e4\u5c4b\u3078\u884c\u304d\u307e\u3057\u305f\u3002\",\n        \"\u6771\u4eac\u5927\u962a\u540d\u53e4\u5c4b\u30fb\u3078\u884c\u304d\u307e\u3057\u305f\u3002\"\n      ],\n      answer: 0,\n      explanation: \"\u306a\u3089\u3079\u305f\u8a00\u8449\u3092\u533a\u5207\u308b\u3068\u304d\u306b\u300c\u30fb\u300d\u3092\u4f7f\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\"\n    },\n    {\n      type: \"\u2026\u2026 \u70b9\u7dda\",\n      question: \"\u8a00\u8449\u304c\u9014\u4e2d\u3067\u6b62\u307e\u308b\u611f\u3058\u3092\u8868\u3059\u6587\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u3092\u3048\u3089\u3073\u307e\u3057\u3087\u3046\u3002\",\n      choices: [\n        \"\u3042\u306e\u2026\u2026\u3002\",\n        \"\u3042\u306e\u3002\u2026\u2026\",\n        \"\u2026\u2026\u3042\u306e\u3002\",\n        \"\u3042\u306e\u3001\u3002\u2026\u2026\"\n      ],\n      answer: 0,\n      explanation: \"\u8a00\u3044\u3088\u3069\u3093\u3060\u308a\u3001\u8a00\u8449\u304c\u7d9a\u304b\u306a\u3044\u611f\u3058\u3092\u8868\u3059\u3068\u304d\u306b\u300c\u2026\u2026\u300d\u3092\u4f7f\u3044\u307e\u3059\u3002\"\n    }\n  ];\n\n  let questions = [];\n  let current = 0;\n  let score = 0;\n  let answered = false;\n\n  function shuffle(array) {\n    return [...array].sort(() => Math.random() - 0.5);\n  }\n\n  function startGame() {\n    questions = shuffle(QUESTIONS);\n    current = 0;\n    score = 0;\n    answered = false;\n    renderQuestion();\n  }\n\n  function renderStart() {\n    app.innerHTML = `\n      <div class=\"punc-game\">\n        <h2>\u3075\u3054\u3046\u30de\u30b9\u30bf\u30fc<\/h2>\n        <div class=\"punc-start\">\n          <p>\u6b63\u3057\u3044\u7b26\u53f7\u306e\u4f7f\u3044\u65b9\u3092\u3048\u3089\u307c\u3046\uff01<\/p>\n          <p>\u3001 \u3002 \u300c\u300d \u300e\u300f \uff1f \uff01 \u30fb \u2026\u2026 \u304c\u51fa\u3066\u304f\u308b\u3088\u3002<\/p>\n          <button id=\"startBtn\">\u30b9\u30bf\u30fc\u30c8<\/button>\n        <\/div>\n      <\/div>\n    `;\n\n    document.getElementById(\"startBtn\").addEventListener(\"click\", startGame);\n  }\n\n  function renderQuestion() {\n    answered = false;\n    const q = questions[current];\n\n    app.innerHTML = `\n      <div class=\"punc-game\">\n        <h2>\u3075\u3054\u3046\u30de\u30b9\u30bf\u30fc<\/h2>\n\n        <div class=\"punc-top\">\n          <div class=\"punc-badge\">\u554f\u984c ${current + 1} \/ ${questions.length}<\/div>\n          <div class=\"punc-badge\">\u30b9\u30b3\u30a2 ${score}<\/div>\n        <\/div>\n\n        <div class=\"punc-question-box\">\n          <div class=\"punc-type\">${q.type}<\/div>\n          <div class=\"punc-question\">${q.question}<\/div>\n        <\/div>\n\n        <div class=\"punc-choices\">\n          ${q.choices.map((choice, index) => `\n            <button class=\"punc-choice\" data-index=\"${index}\">\n              ${index + 1}. ${choice}\n            <\/button>\n          `).join(\"\")}\n        <\/div>\n\n        <div id=\"message\" class=\"punc-message\"><\/div>\n        <button id=\"nextBtn\" class=\"punc-next\">\u6b21\u306e\u554f\u984c\u3078<\/button>\n      <\/div>\n    `;\n\n    document.querySelectorAll(\".punc-choice\").forEach(btn => {\n      btn.addEventListener(\"click\", checkAnswer);\n    });\n\n    document.getElementById(\"nextBtn\").addEventListener(\"click\", goNextQuestion);\n  }\n\n  function checkAnswer(e) {\n    if (answered) return;\n    answered = true;\n\n    const selected = Number(e.currentTarget.dataset.index);\n    const q = questions[current];\n    const buttons = document.querySelectorAll(\".punc-choice\");\n    const message = document.getElementById(\"message\");\n    const nextBtn = document.getElementById(\"nextBtn\");\n    const gameBox = document.querySelector(\".punc-game\");\n\n    buttons.forEach((btn, index) => {\n      btn.disabled = true;\n\n      if (index === q.answer) {\n        btn.classList.add(\"correct\");\n      }\n\n      if (index === selected && selected !== q.answer) {\n        btn.classList.add(\"wrong\");\n      }\n    });\n\n    if (selected === q.answer) {\n      score++;\n      message.textContent = `\u6b63\u89e3\uff01 ${q.explanation}`;\n\n      gameBox.classList.add(\"correct-flash\");\n      showCelebrate();\n      showStars();\n\n      setTimeout(goNextQuestion, 1500);\n    } else {\n      message.textContent = `\u3056\u3093\u306d\u3093\u3002 ${q.explanation}`;\n      nextBtn.classList.add(\"show\");\n    }\n  }\n\n  function goNextQuestion() {\n    current++;\n\n    if (current >= questions.length) {\n      renderResult();\n    } else {\n      renderQuestion();\n    }\n  }\n\n  function showCelebrate() {\n    const div = document.createElement(\"div\");\n    div.className = \"punc-celebrate\";\n    div.textContent = \"\u305b\u3044\u304b\u3044\uff01\";\n    document.body.appendChild(div);\n\n    setTimeout(() => {\n      div.remove();\n    }, 1200);\n  }\n\n  function showStars() {\n    const marks = [\"\u2605\", \"\u2728\", \"\ud83c\udf1f\", \"\u25ce\", \"\u82b1\u4e38\"];\n\n    for (let i = 0; i < 18; i++) {\n      const star = document.createElement(\"div\");\n      star.className = \"punc-star\";\n      star.textContent = marks[Math.floor(Math.random() * marks.length)];\n\n      star.style.left = \"50%\";\n      star.style.top = \"45%\";\n      star.style.setProperty(\"--x\", `${Math.random() * 520 - 260}px`);\n      star.style.setProperty(\"--y\", `${Math.random() * 360 - 180}px`);\n\n      document.body.appendChild(star);\n\n      setTimeout(() => {\n        star.remove();\n      }, 1200);\n    }\n  }\n\n  function renderResult() {\n    let comment = \"\";\n\n    if (score === questions.length) {\n      comment = \"\u3059\u3054\u3044\uff01\u7b26\u53f7\u30de\u30b9\u30bf\u30fc\u3067\u3059\uff01\";\n    } else if (score >= 6) {\n      comment = \"\u3044\u3044\u611f\u3058\uff01\u3042\u3068\u5c11\u3057\u3067\u30de\u30b9\u30bf\u30fc\u3067\u3059\u3002\";\n    } else if (score >= 3) {\n      comment = \"\u7b26\u53f7\u306e\u4f7f\u3044\u65b9\u3092\u3082\u3046\u4e00\u5ea6\u305f\u3057\u304b\u3081\u3088\u3046\u3002\";\n    } else {\n      comment = \"\u307e\u305a\u306f\u300c\u3001\u300d\u300c\u3002\u300d\u300c\u300d\u304b\u3089\u7df4\u7fd2\u3057\u3088\u3046\u3002\";\n    }\n\n    app.innerHTML = `\n      <div class=\"punc-game\">\n        <h2>\u3075\u3054\u3046\u30de\u30b9\u30bf\u30fc<\/h2>\n        <div class=\"punc-result\">\n          <h3>\u7d50\u679c<\/h3>\n          <p>${questions.length}\u554f\u4e2d ${score}\u554f \u6b63\u89e3\uff01<\/p>\n          <p>${comment}<\/p>\n          <button id=\"restartBtn\" class=\"punc-restart\">\u3082\u3046\u4e00\u5ea6<\/button>\n        <\/div>\n      <\/div>\n    `;\n\n    document.getElementById(\"restartBtn\").addEventListener(\"click\", startGame);\n  }\n\n  renderStart();\n});\n<\/script>\n\n<div id=\"punctuation-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\"><strong>\ud83d\udcd6 \u30c6\u30f3\u30dd\u3088\u304f\u904a\u3079\u308b<\/strong><br>\u6b63\u89e3\u3059\u308b\u3068\u81ea\u52d5\u3067\u6b21\u306e\u554f\u984c\u3078\u9032\u307f\u3001\u30b2\u30fc\u30e0\u611f\u899a\u3067\u3069\u3093\u3069\u3093\u6311\u6226\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcd6 <strong>\u3044\u308d\u3044\u308d\u306a\u7b26\u53f7\u3092\u307e\u3068\u3081\u3066\u5fa9\u7fd2<\/strong><br>\u300c\u3001\u300d\u300c\u3002\u300d\u300c\u300d\u300c\u300e\u300f\u300d\u300c\uff1f\u300d\u300c\uff01\u300d\u300c\u30fb\u300d\u300c\u2026\u2026\u300d\u306a\u3069\u3001\u56fd\u8a9e\u3067\u5b66\u7fd2\u3059\u308b\u7b26\u53f7\u304c\u5e45\u5e83\u304f\u767b\u5834\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udcd6 <strong>\u307e\u3061\u304c\u3044\u306a\u304c\u3089\u899a\u3048\u3089\u308c\u308b<\/strong><br>\u6b63\u89e3\u3060\u3051\u3067\u306a\u304f\u89e3\u8aac\u3082\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001\u307e\u3061\u304c\u3048\u305f\u554f\u984c\u3082\u5fa9\u7fd2\u3057\u306a\u304c\u3089\u5b66\u3076\u3053\u3068\u304c\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\u3053\u306e\u529b\u3001\u3069\u3093\u306a\u3068\u304d\u306b\u5f79\u7acb\u3064\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u2728 <strong>\u4f5c\u6587\u3084\u611f\u60f3\u6587\u3092\u66f8\u304f\u3068\u304d<\/strong><br>\u300c\u3001\u300d\u3084\u300c\u3002\u300d\u3001\u300c\u300d\u3092\u6b63\u3057\u304f\u4f7f\u3046\u3053\u3068\u3067\u3001\u8aad\u307f\u3084\u3059\u3044\u6587\u7ae0\u304c\u66f8\u3051\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2728 <strong>\u304a\u8a71\u3084\u7269\u8a9e\u3092\u8aad\u3080\u3068\u304d<\/strong><br>\u4f1a\u8a71\u3084\u767b\u5834\u4eba\u7269\u306e\u6c17\u6301\u3061\u304c\u5206\u304b\u308a\u3084\u3059\u304f\u306a\u308a\u3001\u5185\u5bb9\u3092\u6b63\u3057\u304f\u8aad\u307f\u53d6\u308b\u529b\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2728 <strong>\u624b\u7d19\u3084\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u66f8\u304f\u3068\u304d<\/strong><br>\u76f8\u624b\u306b\u4f1d\u308f\u308a\u3084\u3059\u3044\u6587\u7ae0\u3092\u66f8\u304f\u305f\u3081\u306b\u3001\u7b26\u53f7\u306e\u6b63\u3057\u3044\u4f7f\u3044\u65b9\u304c\u5f79\u7acb\u3061\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\">\u7b26\u53f7\u306f\u3001\u6587\u7ae0\u3092\u8aad\u307f\u3084\u3059\u304f\u3057\u305f\u308a\u3001\u6c17\u6301\u3061\u3084\u4f1a\u8a71\u3092\u6b63\u3057\u304f\u4f1d\u3048\u305f\u308a\u3059\u308b\u305f\u3081\u306b\u6b20\u304b\u305b\u306a\u3044\u3082\u306e\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u30eb\u30fc\u30eb\u3092\u8aac\u660e\u3055\u308c\u308b\u3060\u3051\u3067\u306f\u899a\u3048\u306b\u304f\u304f\u3001\u5b9f\u969b\u306e\u6587\u7ae0\u306e\u4e2d\u3067\u4f7f\u3044\u306a\u304c\u3089\u8eab\u306b\u3064\u3051\u3066\u3044\u304f\u3053\u3068\u304c\u5927\u5207\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30b2\u30fc\u30e0\u3067\u306f\u3001\u6b63\u3057\u3044\u6587\u3092\u9078\u3076\u30af\u30a4\u30ba\u5f62\u5f0f\u3067\u3001\u7b26\u53f7\u306e\u4f7f\u3044\u65b9\u3092\u7e70\u308a\u8fd4\u3057\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002\u77ed\u6642\u9593\u3067\u53d6\u308a\u7d44\u3081\u308b\u305f\u3081\u3001\u6388\u696d\u306e\u5c0e\u5165\u3084\u5fa9\u7fd2\u3001\u5bb6\u5ead\u5b66\u7fd2\u306b\u3082\u6d3b\u7528\u3057\u3084\u3059\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u697d\u3057\u307f\u306a\u304c\u3089\u554f\u984c\u306b\u6311\u6226\u3057\u3001\u6587\u7ae0\u3092\u66f8\u304f\u529b\u3084\u8aad\u3080\u529b\u306b\u3064\u306a\u3052\u3066\u3044\u305f\u3060\u3051\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:422px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u3001\u7b26\u53f7\u306e\u4f7f\u3044\u65b9\u3092\u30b2\u30fc\u30e0\u611f\u899a\u3067\u697d\u3057\u304f\u5fa9\u7fd2\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002 &#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,5],"tags":[46,384,1855,1857],"class_list":["post-12076","post","type-post","status-publish","format-standard","hentry","category-16","category-5","tag-46","tag-384","tag-1855","tag-1857"],"_links":{"self":[{"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts\/12076","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=12076"}],"version-history":[{"count":2,"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts\/12076\/revisions"}],"predecessor-version":[{"id":12081,"href":"https:\/\/chicodori.net\/index.php?rest_route=\/wp\/v2\/posts\/12076\/revisions\/12081"}],"wp:attachment":[{"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chicodori.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}