{"id":9147,"date":"2026-02-26T14:50:06","date_gmt":"2026-02-26T05:50:06","guid":{"rendered":"https:\/\/howroad.co.jp\/column\/?page_id=9147"},"modified":"2026-02-26T15:02:36","modified_gmt":"2026-02-26T06:02:36","slug":"%e8%a8%ba%e6%96%adfoam%e3%83%86%e3%82%b9%e3%83%88-2","status":"publish","type":"page","link":"https:\/\/howroad.co.jp\/column\/?page_id=9147","title":{"rendered":"\u8a3a\u65ad\u30d5\u30a9\u30fc\u30e0-\u4e8b\u52d9\u54e1"},"content":{"rendered":"\n<div class=\"line-wrap\">\n  <div class=\"line-chat\" id=\"chat\">\n\n    <!-- Q1 -->\n    <div class=\"bubble left\">\n      Q1. \u3069\u308c\u304c\u3001\u3042\u306a\u305f\u306e\u5f37\u307f\u306b\u4e00\u756a\u8fd1\u3044\u3067\u3059\u304b\uff1f\n    <\/div>\n\n    <div class=\"answers\">\n      <div class=\"bubble right answer\" onclick=\"next(2,'A',this)\">\n        \u30b3\u30c4\u30b3\u30c4\u6b63\u78ba\u306b\u7a4d\u307f\u4e0a\u3052\u308b\u306e\u304c\u5f97\u610f\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'B',this)\">\n        \u5c0f\u3055\u306a\u9055\u548c\u611f\u306b\u3059\u3050\u6c17\u3065\u304f\t\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'C',this)\">\n        \u5fd9\u3057\u304f\u3066\u3082\u624b\u3092\u629c\u3051\u306a\u3044\t\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'D',this)\">\n        \u65b0\u3057\u3044\u3053\u3068\u3092\u8a66\u3059\u306e\u306b\u62b5\u6297\u306f\u306a\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. \u554f\u984c\u304c\u8d77\u304d\u305f\u3068\u304d\u3001\u3042\u306a\u305f\u306f\u3069\u3046\u3057\u307e\u3059\u304b?\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(3,'A',this)\">\u307e\u305a\u539f\u56e0\u3092\u843d\u3061\u7740\u3044\u3066\u6574\u7406\u3059\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'B',this)\">\u3068\u308a\u3042\u3048\u305a\u4eca\u3067\u304d\u308b\u3053\u3068\u304b\u3089\u52d5\u304f<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'C',this)\">\u4e0a\u53f8\u306b\u5171\u6709\u3057\u3066\u3001\u30c1\u30fc\u30e0\u3067\u3067\u304d\u308b\u89e3\u6c7a\u7b56\u3092\u63a2\u3059<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'D',this)\">\u6b21\u306f\u30df\u30b9\u3057\u306a\u3044\u4ed5\u7d44\u307f\u3092\u8003\u3048\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. \u6bce\u65e5\u306e\u696d\u52d9\u306b\u3064\u3044\u3066\u3001\u3075\u3068\u611f\u3058\u308b\u3053\u3068\u306f\uff1f\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(4,'A',this)\">\u4eca\u306f\u3044\u3044\u611f\u3058!\u3067\u3082\u3001\u5148\u306e\u3053\u3068\u3082\u8003\u3048\u3066\u304a\u3053\u3046\u304b\u306a&#x1f60a;<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'B',this)\">\u6700\u8fd1\u3061\u3087\u3063\u3068\u5fd9\u3057\u3044\u3002\u3082\u3063\u3068\u697d\u306b\u3067\u304d\u306a\u3044\u304b\u306a&#x1f914;<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'C',this)\">\u3082\u3046...\u672c\u5f53\u306b\u304d\u3064\u3044...&#x1f630;\t<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'D',this)\">\u5927\u5909\u3060\u3051\u3069\u3001\u3084\u308a\u65b9\u5909\u3048\u308c\u3070\u3082\u3063\u3068\u826f\u304f\u306a\u308a\u305d\u3046!&#x1f4aa;<\/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. \u4ed5\u4e8b\u3067\u5927\u5207\u306b\u3057\u3066\u3044\u308b\u3053\u3068\u306f?\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(5,'A',this)\">\u4fe1\u983c\u3092\u5b88\u308b\u3053\u3068<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'B',this)\">\u6bb5\u53d6\u308a\u3088\u304f\u9032\u3081\u308b\u3053\u3068<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'C',this)\">\u307f\u3093\u306a\u304c\u50cd\u304d\u3084\u3059\u3044\u3053\u3068<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'D',this)\">\u3082\u3063\u3068\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3053\u3068<\/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=9074\"; }\n  if(maxType===\"B\"){ window.location.href=\"\/column\/?page_id=9080\"; }\n  if(maxType===\"C\"){ window.location.href=\"\/column\/?page_id=9082\"; }\n  if(maxType===\"D\"){ window.location.href=\"\/column\/?page_id=9086\"; }\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. \u3069\u308c\u304c\u3001\u3042\u306a\u305f\u306e\u5f37\u307f\u306b\u4e00\u756a\u8fd1\u3044\u3067\u3059\u304b\uff1f \u30b3\u30c4\u30b3\u30c4\u6b63\u78ba\u306b\u7a4d\u307f\u4e0a\u3052\u308b\u306e\u304c\u5f97\u610f \u5c0f\u3055\u306a\u9055\u548c\u611f\u306b\u3059\u3050\u6c17\u3065\u304f \u5fd9\u3057\u304f\u3066\u3082\u624b\u3092\u629c\u3051\u306a\u3044 \u65b0\u3057\u3044\u3053\u3068\u3092\u8a66\u3059\u306e\u306b\u62b5\u6297\u306f\u306a\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-9147","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/9147","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=9147"}],"version-history":[{"count":8,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/9147\/revisions"}],"predecessor-version":[{"id":9163,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/9147\/revisions\/9163"}],"wp:attachment":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}