{"id":9149,"date":"2026-02-26T15:10:12","date_gmt":"2026-02-26T06:10:12","guid":{"rendered":"https:\/\/howroad.co.jp\/column\/?page_id=9149"},"modified":"2026-02-26T15:10:14","modified_gmt":"2026-02-26T06:10:14","slug":"%e8%a8%ba%e6%96%adfoam%e3%83%86%e3%82%b9%e3%83%88","status":"publish","type":"page","link":"https:\/\/howroad.co.jp\/column\/?page_id=9149","title":{"rendered":"\u8a3a\u65ad\u30d5\u30a9\u30fc\u30e0-\u73fe\u5834\u62c5\u5f53"},"content":{"rendered":"\n<div class=\"line-wrap\">\n  <div class=\"line-chat\" id=\"chat\">\n\n    <!-- Q1 -->\n    <div class=\"bubble left\">\n      Q1. \u5468\u308a\u304b\u3089\u3088\u304f\u8a00\u308f\u308c\u308b\u3042\u306a\u305f\u306e\u5f37\u307f\u306f\uff1f\n    <\/div>\n\n    <div class=\"answers\">\n      <div class=\"bubble right answer\" onclick=\"next(2,'A',this)\">\n        \u4efb\u3055\u308c\u305f\u4ed5\u4e8b\u306f\u8cac\u4efb\u6301\u3063\u3066\u899a\u3048\u308b\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'B',this)\">\n        \u5168\u4f53\u50cf\u306e\u628a\u63e1\u304c\u5f97\u610f\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'C',this)\">\n        \u5fd9\u3057\u304f\u3066\u3082\u624b\u3092\u629c\u304b\u306a\u3044\t\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'D',this)\">\n        \u4efb\u3055\u308c\u305f\u3053\u3068\u306f\u65e9\u304f\u5f62\u306b\u3057\u305f\u3044\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\nlet scores = {A:0, B:0, C:0, D:0};\n\nfunction next(questionNumber,type,el){\n\n  \/\/ \u30b9\u30b3\u30a2\u52a0\u7b97\n  scores[type]++;\n\n  \/\/ \u62bc\u3057\u305f\u30b0\u30eb\u30fc\u30d7\u3092\u30ed\u30c3\u30af\n  let parent = el.parentElement;\n  let buttons = parent.querySelectorAll('.answer');\n  buttons.forEach(btn=>{\n    btn.style.pointerEvents = \"none\";\n    btn.style.opacity = 0.4;\n  });\n  el.style.opacity = 1;\n\n  let chat = document.getElementById(\"chat\");\n\n  \/\/ Q2\n  if(questionNumber===2){\n    setTimeout(()=>{\n      let q2 = `\n        <div class=\"bubble left fadeIn\">\n          Q2. \u6700\u8fd1\u3001\u3053\u3093\u306a\u6c17\u6301\u3061\u306b\u306a\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(3,'A',this)\">\u4eca\u306f\u5927\u304d\u306a\u554f\u984c\u306f\u306a\u3044\u3002\u3067\u3082\u3001\u3053\u306e\u307e\u307e\u3067\u3044\u3044\u306e\u304b\u306a\u3068\u601d\u3046\u3053\u3068\u304c\u3042\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'B',this)\">\u3082\u3063\u3068\u52b9\u7387\u3088\u304f\u3067\u304d\u308b\u306f\u305a\u306a\u306e\u306b\u3001\u5909\u3048\u3089\u308c\u306a\u3044\u3082\u3069\u304b\u3057\u3055\u304c\u3042\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'C',this)\">\u3053\u306e\u307e\u307e\u3060\u3068\u307e\u305a\u3044\u6c17\u304c\u3059\u308b\u3002\u3067\u3082\u4f55\u304b\u3089\u52d5\u3051\u3070\u3044\u3044\u304b\u5206\u304b\u3089\u306a\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'D',this)\">\u3082\u3046\u5909\u3048\u306a\u3044\u3068\u30c0\u30e1\u3060\u3068\u8179\u3092\u304f\u304f\u3063\u3066\u3044\u308b<\/div>\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', q2);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n\n  \/\/ Q3\n  if(questionNumber===3){\n    setTimeout(()=>{\n      let q3 = `\n        <div class=\"bubble left fadeIn\">\n          Q3. \u3042\u306a\u305f\u306e\u72b6\u6cc1\u306b\u6700\u3082\u8fd1\u3044\u3082\u306e\u306f\u3069\u308c\u3067\u3059\u304b?\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(4,'A',this)\">\u7d4c\u55b6\u306e\u6570\u5b57\u3082\u5c11\u3057\u305a\u3064\u5206\u304b\u308b\u3088\u3046\u306b\u306a\u308a\u305f\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'B',this)\">\u610f\u898b\u306f\u3042\u308b\u3051\u3069\u3001\u6c7a\u3081\u308b\u7acb\u5834\u3067\u306f\u306a\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'C',this)\">\u63d0\u6848\u3059\u308b\u305f\u3081\u306e\u8aac\u5f97\u6750\u6599\u3092\u63a2\u3057\u3066\u3044\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'D',this)\">\u5931\u6557\u3057\u305f\u3089\u8cac\u4efb\u3092\u554f\u308f\u308c\u308b\u306e\u3067\u614e\u91cd\u306b\u9078\u3073\u305f\u3044<\/div>\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', q3);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n\n  \/\/ Q4\n  if(questionNumber===4){\n    setTimeout(()=>{\n      let q4 = `\n        <div class=\"bubble left fadeIn\">\n          Q4. \u793e\u9577\u3084\u4e0a\u53f8\u3068\u306e\u95a2\u4fc2\u6027\u306b\u3064\u3044\u3066\u3001\u3069\u308c\u306b\u8fd1\u3044\u3067\u3059\u304b?\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(5,'A',this)\">\u307e\u3060\u81ea\u5206\u306f\u5b66\u3076\u7acb\u5834\u3060\u3068\u601d\u3063\u3066\u3044\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'B',this)\">\u672c\u5f53\u306f\u3082\u3063\u3068\u4efb\u3055\u308c\u305f\u3044\u3068\u601d\u3063\u3066\u3044\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'C',this)\">\u4e00\u5ea6\u304d\u3061\u3093\u3068\u8a71\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3063\u3066\u3044\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'D',this)\">\u4efb\u3055\u308c\u305f\u304b\u3089\u306b\u306f\u3061\u3083\u3093\u3068\u3084\u308a\u305f\u3044\u3068\u601d\u3063\u3066\u3044\u308b<\/div>\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', q4);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n\n  \/\/ \u7d50\u679c\u30dc\u30bf\u30f3\n  if(questionNumber===5){\n    setTimeout(()=>{\n      let resultBtn = `\n        <div class=\"bubble right result-btn fadeIn\" onclick=\"showResult()\">\n          &#x1f50d; \u8a3a\u65ad\u7d50\u679c\u3092\u898b\u308b\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', resultBtn);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n}\n\nfunction showResult(){\n  let maxType = Object.keys(scores)\n    .reduce((a,b)=>scores[a]>scores[b]?a:b);\n\n  if(maxType===\"A\"){ window.location.href=\"\/column\/?page_id=9076\"; }\n  if(maxType===\"B\"){ window.location.href=\"\/column\/?page_id=9078\"; }\n  if(maxType===\"C\"){ window.location.href=\"\/column\/?page_id=9084\"; }\n  if(maxType===\"D\"){ window.location.href=\"\/column\/?page_id=9088\"; }\n}\n<\/script>\n\n<style>\n.line-wrap{\n  width:100%;\n  max-width:100%;\n  margin:0 auto;\n  background: linear-gradient(#a9d0f5, #d4ecff);\n  padding:15px;\n  border-radius:12px;\n}\n\n.line-chat{\n  display:flex;\n  flex-direction:column;\n  gap:12px;\n  max-height:600px;\n  overflow-y:auto;\n}\n\n.bubble{\n  padding:10px 14px;\n  border-radius:18px;\n  font-size:14px;\n  max-width:85%;\n  line-height:1.5;\n  text-align:left;\n}\n\n.left{\n  background:white;\n  align-self:flex-start;\n}\n\n.answer{\n  background:#06c755;\n  color:white;\n}\n\n.answer:hover{\n  transform:scale(1.03);\n}\n\n.right{\n  color:white;\n  align-self:flex-end;\n  cursor:pointer;\n  margin-top:7px;\n  transition:0.2s;\n}\n\n.right:hover{\n  transform:scale(1.03);\n}\n\n.result-btn{\n  background:#ff9800 !important;\n  font-weight:bold;\n}\n\n.fadeIn{\n  animation:fadeUp 0.4s ease forwards;\n}\n\n@keyframes fadeUp{\n  from{\n    opacity:0;\n    transform:translateY(10px);\n  }\n  to{\n    opacity:1;\n    transform:translateY(0);\n  }\n}\n<\/style>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Q1. \u5468\u308a\u304b\u3089\u3088\u304f\u8a00\u308f\u308c\u308b\u3042\u306a\u305f\u306e\u5f37\u307f\u306f\uff1f \u4efb\u3055\u308c\u305f\u4ed5\u4e8b\u306f\u8cac\u4efb\u6301\u3063\u3066\u899a\u3048\u308b \u5168\u4f53\u50cf\u306e\u628a\u63e1\u304c\u5f97\u610f \u5fd9\u3057\u304f\u3066\u3082\u624b\u3092\u629c\u304b\u306a\u3044 \u4efb\u3055\u308c\u305f\u3053\u3068\u306f\u65e9\u304f\u5f62\u306b\u3057\u305f\u3044<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-1column.php","meta":{"footnotes":""},"class_list":["post-9149","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/9149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9149"}],"version-history":[{"count":3,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/9149\/revisions"}],"predecessor-version":[{"id":9165,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/9149\/revisions\/9165"}],"wp:attachment":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}